全透视：CSS Z-index 属性（2）
作者：竹馥堂主 来源：osmn00.com 发布时间：2009-09-21 12:52:00
标签：css,z-index,层叠,属性
自然的层叠顺序
在一个HTML页面中，自然的层叠顺序（也就是元素在Z轴上的顺序）是由很多因素决定的。下面的是一个列表，它展示的列表项是处于一个层叠环境（stacking context，暂时未找到合适的汉语翻译，应该是指层叠的元素所处的那个层叠的环境）中，这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予Z-index属性。
·元素的背景和边框会创建一个stacking context
·具有负值的stacking contexts元素，按照出现的先后顺序排列（越靠后层级越靠上）
·没有被定位，没有浮动的块级元素，按照出现的先后顺序排列
·没有被定位，浮动的元素，按照出现的先后顺序排列
·内联元素，按照出现的先后顺序排列排列
·被定位的元素，按照出现的先后顺序排列
Z-index 属性，当被正确使用的时候，会改变自然的层叠顺序。
当然，除非元素已经被定位按照互相交叠的形式展现，否则元素的层叠顺序并不会特别的明显。下面的，负边距的BOX被拿来展示，用以说明自然的层叠顺序。
上面的BOX被定义了不同的背景和边框色，并且后两个是交错的并且定义了负值的顶部边距，所以我们可以看到自然的层叠顺序。灰色的BOX在标记中位于第一位，蓝色的BOX位于第二位，金色的排在第三。应用的负边距明确的表明这个事实：这些元素未被设置Z-index 属性；它们的层叠顺序是自然的，或者是默认的，复合规则的。产生交错的现象都是因为负值的边距。
0
投稿猜你喜欢
- 前两天写了一篇《浅谈网站用户粘性的含义》的文章，有些个别网友问可否谈谈怎么样加强用户粘性的问题？虽然对此本人没有系统的理论做以支撑，但是既然
- 太多的小伙伴正在学习Python，就说自己以后要做全栈开发，大家知道这是做什么的吗？我们现在所知道的知识点，哪些是以后你要从事这个全栈所需要
- 我们用下了asp代码简单统计了下载一个文件需要的时间：<％Function DownloadTime(intFileSize
- 最近我遇到了一个 bug，我试着通过 Rails 在以“utf8”编码的 MariaDB 中保存一个 UTF-8 字符串，然后出现了一个离奇
MySQL根据不同条件联查不同表的数据项目开发中遇到类似的需求。Mybatis 中的< if >标签只能判断where部分，不能- 如何清除Vbscript惹出来的中文乱码？ ＜script language=vbscript runat=s
- 这几天刚刚做了这个东西，有网友问到，所以分享一下。ie6、firefox2 通过，麻烦有ie7的网友测试一下，由于有其他代码，剖析出来麻烦，
- 我们知道，数组的sort方法可以对数组元素进行排序，默认是按ASCII字母表顺序排序。如果要根据其他的顺序排序就需要为sort方法提供一个比
- 不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave
- react HookReact Hook 是 React 16.8 版本引入的一项新特性，它能够让函数组件拥有类组件中的状态(state)和
- html 页面<html lang="en"><head> <meta charset=&
- 使用Python进行插值非常方便，可以直接使用scipy中的interpolateimport numpy as npx1 = np.lin
- 中介者模式中介者模式（Mediator Pattern）是一种常用的设计模式，用于解决各个对象之间的复杂依赖关系，使得各个对象之间可以独立地
- web.py 是一个轻量级Python web框架，它简单而且功能强大。web.py 是一个Python 的web 框架，它简单而且功能强大
- 本文记录下自己使用Python实现一个简易的ORM模型使用到的知识1、元类2、描述器元类对于元类，我的理解其实也便较浅，大概是这个意思所有的
- 1. 使用 easy_installeasy_install 这应该是最古老的包安装方式了，目前基本没有人使用了。下面是 easy_inst
- DateDiff 函数描述 返回两个日期之间的时间间隔。 语法 DateDiff(interval, date1, date2 [,firs
- 例如，在创建新表或更新现有表上的数据时，这些事件将存储在mysql binlog中，也就是MySQL数据库的二进制日志。二进制日志在MySQ
- 最新MySql8.27主从复制以及SpringBoot项目中的读写分离实战1、MySql主从复制MySQL主从复制是一个异步的复制过程，底层
- 本文实例讲述了javascript正则表达式模糊匹配IP地址功能。分享给大家供大家参考，具体如下：function checkip() {
