你需要了解的z-index世界.pdfVIP

你需要了解的z-index世界 你需要了解的z-index世界 原作者：doyoe 原⽂链 接：http://blog .doyoe .com/20 14/0 1/2 1/css/%E4%BD%A0%E9%9C%80%E8%A6%81%E index%E4%B8%96%E7%95%8C/ z-index的重要性 在我看来，z-index 给了我们⽇常⼯作中以极⼤的帮助，我们⽤它来定义元素的 叠级别 （stack level ）。受益于它，你能做Popup , DropDown , Tips, 图⽂替换等等。 在开始本篇之前，或许我们要先了解⼀下关于 -index的基本信息。 W3C这样描述 每个元素都具有三维空间位置，除了⽔平和垂直位置外，还能在 “Z轴” 上 相叠、 排列。元素在 “Z轴” ⽅向上的呈现顺序，由 叠上下⽂和 叠级别决定。 在⽂档中，每个元素仅属于⼀个 叠上下⽂。元素的 叠级别为整型，它描述了在相 同 叠上下⽂中元素在 “Z轴” 上的呈现顺序。 同⼀ 叠上下⽂中， 叠级别⼤的显⽰在上， 叠级别⼩的显⽰在下，相同 叠级别 时，遵循后来居上的原则，即其在HTML⽂档中的顺序。 不同 叠上下⽂中，元素呈现顺序以⽗级 叠上下⽂的 叠级别来决定呈现的先后顺 序，与⾃⾝的 叠级别⽆关。 z-index语法和应⽤ z-index : auto | integer z-index 接受的属性值为：关键字auto和整数，整数可以是负值 （Firefox2.0及之前不 ⽀持负值）。 需要注意的是 z-index 虽然很给⼒，却只能应⽤于定位元素 （即设置了 position 属性为⾮ static 值），其它情况下，z-index 将被忽略。 对于定位元素⽽⾔，z-index 意味着： 确定该元素在当前 叠上下⽂中的 叠级别。 确定该元素是否创建了⼀个新的局部 叠上下⽂。 创建层叠上下⽂ 在规范中说明：当某个元素的 z-index 未显式定义或者被指定为 auto 时，该元素 不会产⽣新的局部 叠上下⽂。也就是说它可以和兄弟，祖先，后辈元素处在同⼀个 堆叠上下⽂中，它们被放在⼀起⽐较 叠级别，⼉⼦可以盖住祖先，⽗亲也可以盖住 ⼉⼦，⼉⼦甚⾄可以越过祖先，盖住祖先的兄弟，在 叠上下⽂中，它们是并级的关 系。来看这样⼀个例⼦ DEMO1: -index与创建 叠上下⽂ 值得⾼兴的是，⼤部分浏览器都实现了这个特性；不过在IE6/7下，不论 z-index 值 是否被显式定义，都将产⽣新的局部 叠上下⽂，也就是说⼦元素不可以越过是定位 元素的⽗亲，⼦元素都处在新创建的局部 叠上下⽂中，只能在内部进⾏ 叠级别的 ⽐较。 深⼊浅出 某区域内有个浮 提⽰或者下拉菜单，于是可能需要遮住该区域之下的区域。 HTML div class=a ... div class=tips我是⼀个简陋的浮层提示 div div div class=b ... div CSS .a{position:relative;} .tips{position:absolute;z-index :99;} 如上HTML/CSS代码，很显然，浮 tips 将可以覆盖在其⽗级元素 a 的兄弟元素 b 之上。 于是你的意图得到实现，效果如下 图⼀： （图⼀） 这是具体的实现例⼦ DEMO2: -index实现元素 叠。 不过很显然，从 DEMO2 来看，你依然⽆法准确的判断出在各浏览器下，tips 能盖住 b 是因为其⽗级的定位还是本⾝的定位。 但是我们可以做这样⼀个测试，我们让 b 也拥有定位，Code如下： CSS .a{position:relative;} .tips{position:absolute;z-index :99;} .b{position:relative;} 这段代码run完之后，就⽐较纠结了，你能得到的效果将会如下 图⼆： （图⼆） 当然要给出具体实现 DEMO3: 验证创建局部 叠上下⽂。 ⾸先，我们来解读⼀下这个例⼦：因为 a 和 b 都是 relative 且没有定义 z-index （等同于 -index:auto ），根据后来居上的原则，此时 b 的 叠级别是要⾼于 a 的，意 思就是说 a 是⽆法遮住 b 的。不过从 DEMO3