css之层叠级别及z-index

最新推荐文章于 2024-08-21 15:03:08 发布

Rita_jing

最新推荐文章于 2024-08-21 15:03:08 发布

阅读量1.8k

点赞数

分类专栏： css

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

1.创建层叠上下文的元素的背景和边界；
2.z-index为负值的子元素，数值越小越早被绘制；
3.同时满足“in-flow”、“non-inline-level”、“non-positioned”的后代元素；
4.“non-positioned”的浮动元素；
5.满足“in-flow”、“inline-level”、“non-positioned”的后代元素；
6.层叠级数为0的子层叠上下文以及“positioned”且层叠级数为0的后代元素；
7.层叠级数大于等于1的“positioned”子层叠上下文，数值越小越早被绘制；

在规则中，提到了几种元素的修饰词，下面是简单的解释：
“positioned”指的是position为fixed，absolute，relative；那么如果未设置或为static的就是“non-positioned”元素；
“out-of-flow”元素指的浮动的或绝对定位（fixed、absolute）的元素，又或者是根元素；如果不是上述情况，那个这个元素就是“in-flow”；
“inline-level”元素指的是display为inline，inline-table，inline-block的元素；

结论：

1.在同一个层叠上下文中计算层叠顺序时，根据前文所提到的规则来进行就是；
2.对于不同的层叠上下文的元素，层级较大的层叠上下文中的元素用于处于层级小的层叠上下文中的元素之上（MG12将其归结为从父规则）；
3.从另一个角度理解，不同层叠上下文中的元素在计算层叠顺序时不会互相影响，因为在层叠上下文被创建的时候它与其他上下文的层叠顺序就早已经被决定了；4.z-index:auto不会创建层叠上下文，z-index:0会创建层叠上下文（不包括ie7）

以上stack level在浏览器执行情况：
firefox3.0下测试完全吻合，firefox2.0下稍有不同即：“z-index值为负值的定位元素”在“父级stacking context的背景、边界”之前。
ie6.0和7.0中：inline元素的stack level位于block元素之前，且“文本流中非定位的、float浮动子元素”（以下简称浮动元素）和“文本流中非定位的、block块级子元素”（以下简称block元素）处于同一级。

在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.

<div id="a">
    <div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>

比如说, 电子商务网站侧栏的类目展示列表就可以用这个技巧来实现.

下图是某网站的类目展示区域, 二级类目的悬浮层覆盖一级类目列表外框, 而一级类目的节点覆盖二级类目的悬浮层. 如果使用 CSS 实现展示效果, 一级类目的外框相当于上面例子中的 A, 一级类目的节点相当于 A-1, 二级类目的悬浮层相当于 B.

文档中的层叠上下文由满足以下任意一个条件的元素形成：
1.根元素 (HTML),
2.绝对（absolute）定位或相对（relative）定位且 z-index 值不为”auto”，
3.一个 flex 项目(flex item)，且 z-index 值不为 “auto”，也就是父元素 display: flex|inline-flex，
4.元素的 opacity 属性值小于 1（参考 the specification for opacity），
5.元素的 transform 属性值不为 “none”，
6.元素的 mix-blend-mode 属性值不为 “normal”，
7.元素的 isolation 属性被设置为 “isolate”，
8.在 mobile WebKit 和 Chrome 22+ 内核的浏览器中，position: fixed 总是创建一个新的层叠上下文, 即使 z-index 的值是 “auto” （参考这篇文章），
9.在 will-change 中指定了任意 CSS 属性，即便你没有定义该元素的这些属性（参考这篇文章）
10.元素的 -webkit-overflow-scrolling 属性被设置 “touch”

opacity小于1的“non-positioned”元素，它就会被当作一个z-index: 0且opacity: 1的“positioned”元素一样，来进行层叠计算（前文规则中的第6层）；
opacity小于1的“positioned”元素，它将按照前文中z-index的层叠规则计算技术，只不过，即使z-index是auto，仍然会创建层叠上下文；