CSSz-index层级关系优先级的概念
CSS 中的 z-index 属性⽤于设置节点的堆叠顺序, 拥有更⾼堆叠顺序的节点将显⽰在堆叠顺序较低的节点前⾯, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很⼤也未必能将节点显⽰在最前⾯. 本⽂将通过⼀些例⼦对 z-index 的使⽤⽅法进⾏分析, 并且为各位带⼊ z-index 层级树的概念.
⽬录
顺序规则
定位规则
参与规则
默认值规则
从⽗规则
层级树规则
参与规则 2
absolute relative总结
顺序规则
如果不对节点设定 position 属性, 位于⽂档流后⾯的节点会遮盖前⾯的节点.
复制代码
代码如下:
<div id="a">A</div>
<div id="b">B</div>
CSS z-index 属性顺序规则的例⼦
定位规则
如果将 position 设为 static, 位于⽂档流后⾯的节点依然会遮盖前⾯的节点浮动, 所以 position:static 不会影响节点的遮盖关系.
复制代码
代码如下:
<div id="a" >A</div>
<div id="b">B</div>
CSS z-index 属性定位规则的例⼦, static
如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者⽐后者的默认层级⾼.
复制代码
代码如下:
<div id="a" >A</div>
<div id="b">B</div>
CSS z-index 属性定位规则的例⼦, relative | absolute | fixed
在没有 z-index 属性⼲扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这⾥我们对 A 和 B 都不设定position, 但对 A 的⼦节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, ⼜根据定位规则 A' 会覆盖 B.
复制代码
代码如下:
<div id="a">
<div id="a-1" >A-1</div>
</div>
<div id="b">B</div>
CSS z-index 属性互相覆盖的例⼦
上⾯互相覆盖在什么时候⽤到这样的实现? 看起来偏门, 其实很常⽤, ⽐如说, 电⼦商务⽹站侧栏的类⽬展⽰列表就可以⽤这个技巧来实现.
下图是某⽹站的类⽬展⽰区域, ⼆级类⽬的悬浮层覆盖⼀级类⽬列表外框, ⽽⼀级类⽬的节点覆盖⼆级类⽬的悬浮层. 如果使⽤CSS 实现展⽰效果, ⼀级类⽬的外框相当于上⾯例⼦中的 A, ⼀级类⽬的节点相当于 A-1, ⼆级类⽬的悬浮层相当于 B.
电⼦商务⽹站侧栏的类⽬展⽰列表
参与规则
我们尝试不⽤ position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作⽤.
复制代码
代码如下:
<div id="a" >A</div>
<div id="b" >B</div>
<div id="c" >C</div>
CSS z-index 属性参与规则的例⼦, 没有明确定位的时候
W3C 对 z-index 属性的描述中提到在 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时⽣效.
The z-index property specifies the stack order of an element. Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).
复制代码
代码如下:
<div id="a" >A</div>
<div id="b" >B</div>
<div id="c" >C</div>
CSS z-index 属性参与规则的例⼦, 明确定位的节点才能使⽤ z-index 属性
默认值规则
如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同⼀层级内没有⾼低之分; 但 z-index ⼤于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.
复制代码
代码如下:
<div id="a" >A</div>
<div id="b" >B</div>
<div id="c" >C</div>
<div id="d" >D</div>
CSS z-index 属性默认值规则的例⼦
通过检查我们还发现, 当 position 设为 relative, absolute 或者 fixed, ⽽没有设置 z-index 时, IE8 以上和 W3C 浏览器 (下⽂我们统称为 W3C 浏览器) 的 z-index 默认值是 auto, 但 IE6 和 IE7 是 0.
从⽗规则
如果 A, B 节点都定义了 position:relative, A 节点的 z-index ⽐ B 节点⼤, 那么 A 的⼦节点必定覆盖在 B 的⼦节点前⾯.
复制代码
代码如下:
<div id="a" >
<div id="a-1">A-1</div>
</div>
<div id="b" >
<div id="b-1">B-1</div>
</div>
CSS z-index 属性从⽗规则的例⼦, ⼦节点不设定层级
如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点⼀样⼤, 但因为顺序规则, B 节点覆盖在 A 节点前⾯. 就算A 的⼦节点 z-index 值⽐ B 的⼦节点⼤, B 的⼦节点还是会覆盖在 A 的⼦节点前⾯.
复制代码
代码如下:
<div id="a" >
<div id="a-1" >A-1</div>
</div>
<div id="b" >
<div id="b-1" >B-1</div>
</div>
CSS z-index 属性从⽗规则的例⼦, 不可逾越的层级
很多⼈将 z-index 设得很⼤, 9999 什么的都出来了, 如果不考虑⽗节点的影响, 设得再⼤也没⽤, 那是⽆法逾越的层级.
层级树规则
可能你会觉得在 DOM 结构中的兄弟节点会拎出来进⾏⽐较并确定层级, 其实不然.
复制代码
代码如下:
<div id="a" >
<div id="a-1" >A-1</div>
</div>
<div id="b">
<div id="b-1" >B-1</div>
</div>
CSS z-index 属性层级树规则的例⼦
我们认为同时将 position 设为 relative, absolute 或者 fixed, 并且 z-index 经过整数赋值的节点, 会被放置到⼀个与 DOM 不⼀样的层级树⾥⾯, 并且在层级树中通过对⽐ z-index 决定显⽰的层级. 上⾯的例⼦如果⽤层级树来表⽰的话, 应该如下图所⽰.
CSS z-index 的层级树
图中虽然 A-1 (z-index:0) 的值⽐ B-1 (z-index:1) ⼩, 但因为在层级树⾥ A (z-index:2) 和 B-1 在⼀个层级, ⽽ A 的值⽐ B-1 ⼤, 根据从⽗规则, A-1 显⽰在 B-1 前⾯.
参与规则 2
前⾯提到的参与规则认为只要节点的 position 属性为 relative, absolute 或者 fixed, 即可参与层级⽐较,
其实不准确. 如果所有节点都定义了 position:relative, 并且将 z-index 设为整数值, 根据从⽗规则, ⽗节点的层级决定了⼦节点所在层级.
复制代码
代码如下:
<div id="a" >
<div id="a-1" >A-1</div>
</div>
<div id="b">
<div id="b-1" >
<div id="b-1-1" >B-1-1</div>
</div>
</div>
<div id="c" >
<div id="c-1">
<div id="c-1-1">
<div id="c-1-1-1" >C-1-1-1</div>
</div>
</div>
</div>
例⼦中 A, B-1, C-1-1 作为⽗节点, z-index 的值相同, 根据顺序规则, C-1-1 在 B-1 之前, B-1 在 A 之前; ⼜根据从⽗规则, ⽆论⼦节点的 z-index 值是什么, C-1-1-1 在 B-1-1 之前, B-1-1 在 A-1 之前.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。