摘要：为了调整层级顺序，我们想到的往往就是用的属性来控制。规则顺序规则在不设置属性或设置成的情况下，文档流后面的节点会覆盖前面的节点。层级树规则定位节点，且有整数值的不包括，会被放置到一个与节点不一样的层级树里。
前言
DOM层级顺序，大概来说就是DOM节点在z轴方向（垂直于屏幕向外的方向）的显示优先级。为了调整DOM层级顺序，我们想到的往往就是用CSS的z-index属性来控制。虽然看着很简单，但是有时在使用时，我们有时也许会碰到一些一些奇奇怪怪的问题：
为什么有时候将z-index设成很大的值（比如9999），节点依然不能显示在最前面？
z-index属性设为0和不设置z-index属性有什么区别？
float元素和定位元素谁显示的优先级更高？
其实看似简单的层级顺序它自己的一套规则，理解这些规则可以帮助我们在开发中少踩坑。
规则 1. 顺序规则在不设置position属性（或设置成static）的情况下，文档流后面的DOM节点会覆盖前面的DOM节点。
AB
PS：怎么样来让文档流中的节点叠在一起呢？比如我们可以设置DOM的margin-top为负数，这样就让两个节点叠在起一起了。不过为了简化说明，并没有把这些写出来。下同。
2.定位规则定位节点（position属性设置为relative，absolute或fixed的节点）会覆盖非定位节点（不设置position属性或position属性设为static的节点）
AB
根据顺序规则和定位规则, 我们可以做出更加复杂的结构。A和 B 都设为非定位节点，A 的子节点 A-1 设定定位节点。
3. 参与规则AB
z-index属性仅对定位节点生效。
有三个DOM节点，其定位为static。但是A的z-index最大，但是依旧是在最底部，C的z-index最小，而在最顶部，因此可知z-index并未生效，此时为顺序规则在生效。
ABB
我们将B和C的position设置为relative之后，顺序发生了变化。根据参与者规则和定位规则，A不是定位节点，所以即使z-index最大，还是在最底部。而根据参与规则和默认值规则（下一节介绍），B和C都是定位节点，且B的z-index要大于C，所以B在最顶部。
4. 默认值规则ABB
对于所有的定位节点，z-index值大的节点会覆盖z-index值小的节点。
z-index设为0和没有设置z-index的节点在同一层级内没有高低之分。在IE6和7种，z-index的默认值为0，其他浏览器中默认值为auto。
5. 从父规则ABCD
两个节点A和B都是定位节点，如果节点A的z-index值比节点B的大，那么节点A的子元素都会覆盖在节点B以及节点B的子节点上。
A-1B-1
如果定位节点A和B的z-index值一样大，那么根据顺序规则，B会覆盖A，那么即使A的子节点的z-index比B的子节点大，B的子节点还是会覆盖A的子节点。(这就是为什么即使我们把A-1的z-index设置得很大，依然无法盖住B节点的原因)。
6. 层级树规则A-1B-1
定位节点，且z-index有整数值的（不包括z-index:auto），会被放置到一个与DOM节点不一样的层级树里。
在下面的DOM节点中，A和B是兄弟节点，但是在层级树种，A和B-1才是兄弟节点（因为他们都是Root下的第一层含有整数z-index的定位节点），所以A在B和B-1之上。虽然A-1的z-index比B-1的小，但是根据从父规则，A-1也在B-1之上。
A-1B-1
下面这个更复杂的层级树，聪明的你能看明白为什么节点层级是这样的了吗？
层叠上下文A-1B-1-1C-1-1-1
介绍了这么多规则，是在是不好理解，又很难记。其实，要理解这些规则，我们只需要理解一个概念就行了，它就是层叠上下文。
概念层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
特性子元素的 z-index 值只在父级层叠上下文中有意义。
子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
产生的条件满足一下其中一个条件，即可产生一个层叠上下文：
根元素 (HTML),
z-index 值不为 "auto"的 绝对/相对定位，
position: fixed
opacity 属性值小于 1 的元素
transform 属性值不为 "none"的元素
filter值不为“none”的元素
-webkit-overflow-scrolling 属性被设置 "touch"的元素
附录：层叠的顺序表| 位置 | 描述 | CSS |
|---|---|---|
| 1（底部） | 包含该层叠上下文的父元素 | |
| 2 | 负堆叠顺序的子元素 | z-index: |
| 3 | 文档流中，非内联，非定位子元素 | display: /* not inline */; position: static |
| 4 | 非定位浮动子元素 | float: left (or right); position: static |
| 5 | 内联流，非定位子元素 | display: inline; position: static |
| 6 | 堆叠顺序为0的子元素 | z-index: auto (or 0); position: position: relative(or absolute or fixed) |
| 7（顶部） | 堆叠顺序为正的子元素 | z-index: |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116682.html
摘要：层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。例当按以下设置，则出现红色在绿色之上的效果。如何触发触发一个元素形成层叠上下文有以下方法，摘自根元素值不为的绝对相对定位一个值不为的项目，即父元素。 层叠上下文【stacking context】 对于stacking context，在MDN中的描述是 Stacking context is the three...
摘要：元素层叠顺序补充说明位于最下面的特指层叠上下文元素后面会详解的边框和背景色。界中可能有其他的层叠结界，而自身也可能处于其他层叠结界中。 上一篇：《CSS世界》笔记四：流的保护与破坏 写在前面 《CSS世界》这本书还剩六章，但是这本书的精华部分主要是前面的内容，这里仅把后面章节相对重要的内容以博客展示，想着了解更多的小伙伴还是去阅读原文的好，毕竟三百多页的一本书并不是小小几篇博客能完全说...
摘要：当第二层的容器盒子升级为层叠上下文时，红色盒子及灰色盒子的轴层级受制于第二层的容器盒子。当元素处于同一层叠上下文内时可按照如下规则进行层叠判断。 本文首发于政采云前端团队博客：CSS 层叠上下文（Stacking Context） 在网页制作的过程中，元素与元素之间的位置关系，在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚...
摘要：后来居上当元素的层叠水平一致层叠顺序相同的时候，在流中处于后面的元素会覆盖前面的元素。相关连接深入理解中的层叠上下文和层叠顺序层叠顺序探究分层的显示 什么是层叠上下文（stacking context） 可以理解为一个dom节点在Z轴高人一等，特性类似于BFC，即层叠上下文的内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。 CSS2创建层叠上下文的两种方法（参考MDN） 根元...
摘要：栗子有两个，被包裹在一个里，被包裹在另一个盒子里，同时为两个和设置和属性效果我们发下，虽然元素的值为，远大于和的值，但是由于的父元素产生的层叠上下文的的值为，的父元素所产生的层叠上下文的值为，所以永远在和下面。 前言 最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面...
阅读 2307·2023-04-25 21:41
阅读 1470·2021-09-22 15:17
阅读 1198·2021-09-22 10:02
阅读 2087·2021-09-10 11:21
阅读 692·2021-09-03 10:28
阅读 2419·2019-08-30 15:53
阅读 830·2019-08-30 15:44
阅读 822·2019-08-30 13:46
