阅读量:0
元素层叠级别由CSS属性
zindex决定，值越大，元素越在上层。默认为auto。在CSS中，元素的层叠级别和zindex属性是控制元素在页面上显示顺序的关键因素，以下将详细解析CSS中的元素层叠级别及zindex的工作原理：
层叠上下文（Stacking Context）
层叠上下文是一个三维的概念，在CSS2.1规范中，每个盒模型的位置是三维的，分别是X轴、Y轴和Z轴，一般情况下，元素在页面上沿X轴和Y轴平铺，我们察觉不到它们在Z轴上的层叠关系，而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
如果一个元素含有层叠上下文，我们可以理解为这个元素在Z轴上“高人一等”，最终表现就是它离屏幕观察者更近。
| 方法 | 描述 |
| HTML中的根元素 | 标签本身就具有层叠上下文，称为“根层叠上下文” |
| position属性为非static值并设置zindex属性 | 普通元素设置position属性为非static值并设置zindex属性为具体数值，产生层叠上下文 |
| CSS3中的新属性 | CSS3中的一些新属性也可以产生层叠上下文 |
层叠等级（Stacking Level）
在同一个层叠上下文中，层叠等级描述了该层叠上下文中的层叠上下文元素在Z轴上的上下顺序，在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。
具象的比喻：处于层叠上下文中的元素，就像是元素当了官，等级自然比普通元素高，再想象一下，假设一个官员A是个省级领导，他下属有一个秘书a1，家里有一个保姆a2，另一个官员B是一个县级领导，他下属有一个秘书b1，家里有一个保姆b2，a1和b1虽然都是秘书，但是你想一个省级领导的秘书和一个县级领导的秘书之间有可比性么？甚至保姆a2都要比秘书b1的等级高得多。
zindex属性
zindex属性仅在定位元素（position属性值为relative、absolute、fixed或sticky的元素）上有效果，其默认值为auto，表示元素遵循其父元素的层叠顺序，zindex值越大，元素越靠上，离屏幕观察者越近。
| 类型 | 描述 |
| 兄弟元素 | zindex值相同时，后面的元素在前面的元素上面 |
| 父子元素 | 子元素永远在父元素上面，不同父元素里的子元素不能直接比较zindex |
实例分析
以下是一个简单的示例，展示了如何通过设置zindex值来改变元素的层叠顺序：
div { position: relative; width: 100px; height: 100px; } p { position: absolute; fontsize: 20px; width: 100px; height: 100px; } .a { backgroundcolor: blue; zindex: 1; } .b { backgroundcolor: green; zindex: 2; top: 20px; left: 20px; } .c { backgroundcolor: red; zindex: 3; top: 20px; left: 40px; }<div> <p class="a">a</p> <p class="b">b</p> </div> <div> <p class="c">c</p> </div>
在这个例子中，.a、.b和.c都设置了position和zindex属性，因此它们都处于同一个层叠上下文中，由于.c的zindex值最大，所以它会显示在最上层，覆盖其他两个元素。
相关FAQs
问题1：为什么设置了zindex但元素没有按照预期显示？
答案1：可能的原因是zindex属性只在定位元素上有效，确保你为元素设置了正确的position属性值（如relative、absolute、fixed或sticky）。
问题2：如何创建一个新的层叠上下文？
答案2：你可以通过以下几种方式创建一个新的层叠上下文：
1、为元素设置position属性为非static值并设置zindex属性为具体数值。
2、使用CSS3中的新属性，如opacity小于1或transform等。
3、HTML中的根元素<html>本身就具有层叠上下文。
通过深入理解层叠上下文、层叠等级和zindex属性，你可以更好地控制元素在页面上的显示顺序，实现复杂的布局效果。
在CSS（层叠样式表）中，元素层叠级别和zindex属性是控制元素在页面上的堆叠顺序的重要概念。
元素层叠级别
元素的层叠级别是由以下因素决定的：
1、定位上下文（Positioning Context）：元素的层叠级别首先取决于它是否创建了定位上下文，以下CSS属性可以创建定位上下文：
position: relative;
position: absolute;
position: fixed;
position: sticky;
transform、opacity、filter 和perspective 属性的使用。
2、文档流（Document Flow）：未定位的元素按照从上到下、从左到右的顺序排列，这称为文档流，文档流中的元素层叠级别是最基本的。
3、层叠上下文（Stacking Context）：在定位上下文中，元素的层叠级别是由其是否属于某个层叠上下文决定的，层叠上下文是包含定位元素的容器，或者是包含任何上述属性之一的元素。
zindex 属性
zindex 属性用于控制元素在垂直方向上的堆叠顺序，仅在定位上下文中有效，以下规则适用于zindex：
1、只对定位元素有效：zindex属性仅对具有非static定位的元素（即relative、absolute、fixed或sticky定位的元素）生效。
2、值的大小：zindex的值越大，元素在堆叠上下文中的层级就越高，如果两个元素的zindex值相同，则它们的层叠顺序由它们在DOM中的位置决定，即后面的元素会覆盖前面的元素。
3、层叠上下文之间的层叠顺序：如果一个元素属于一个层叠上下文，而另一个元素属于另一个层叠上下文，那么它们的zindex值不会直接比较，处于较高层叠上下文中的元素会覆盖较低层叠上下文中的元素。
4、覆盖规则：如果一个元素位于另一个元素的前面，并且前者有较高的zindex值，那么前者会覆盖后者，即使后者的定位上下文位于前者之前。
有见地的建议
合理使用zindex：避免过度依赖zindex来控制布局，而是应该通过布局结构（如使用flexbox或grid）来减少层叠上下文的创建。
理解DOM结构：zindex值的大小不决定元素的实际位置，而是取决于DOM结构，确保理解元素的DOM顺序，以避免意外的覆盖。
避免层叠上下文的混乱：尽量减少创建多个层叠上下文，以保持页面结构的清晰和易于维护。
测试和调试：使用浏览器开发者工具的层叠顺序查看功能，可以帮助你可视化并调试层叠问题。
通过理解这些概念和规则，你可以更有效地控制页面元素的层叠顺序，创建更加美观和功能丰富的网页设计。
