CSS z-索引和堆叠上下文
我试图更好地理解CSS z-index属性和堆叠上下文。
作为实践，我已经构建了一个包含一些元素的HTML演示，并且我只使用z-index定位尝试以各种不同的顺序对它们进行排序。
基本演示可以在下面提供，或者在这把小提琴中提供。
#d1 { /*z-index: ;*/ position: relative; }
#d2 { /*z-index: ;*/ position: relative; }
#d3 { /*z-index: ;*/ position: relative; }
#d4 { /*z-index: ;*/ position: relative; }
#d1, #d2 {
width: 500px;
height: 200px;
}
#d3, #d4 {
width: 300px;
height: 150px;
}
#d1 {
background-color: rgba(100,100,100,.6);
}
#d2 {
background-color: rgba(0,255,0,.6);
margin-top: -20px;
margin-left: 20px;
}
#d3 {
background-color: rgba(255,0,0,.6);
margin-top: 70px;
margin-left: 50px;
}
#d4 {
background-color: rgba(0,0,255,.6);
margin-top: -70px;
margin-left: 150px;
}<body>
<div id="d1">#d1
<div id="d3">#d3</div>
</div>
<div id="d2">#d2
<div id="d4">#d4</div>
</div>
</body>
现在，是否可以按照以下顺序(最远到最近)来堆叠上述演示中的元素：#d1, #d4, #d2, #d3？
(为了澄清，最初演示中的顺序是：#d1, #d3, #d2, #d4)
免责声明：
在提出这个问题之前，我实际上已经搜索和阅读了关于z-index和堆叠上下文的内容。我熟悉z-index的一般规则和规范，以及何时创建堆叠上下文。
因此，这不是一个一般的“我不明白z索引是如何工作”的问题，因此它不是这个问题的复制。
这个问题指的是我在上面尽可能详细地介绍的具体情况。我所要求的是对这个具体问题的非常具体的回答--“是的，这可以这样做.”，或者“不，这是不可能实现的，因为.”
回答 3
Stack Overflow用户
发布于 2017-07-21 11:28:50
现在，是否可以按照以下顺序(最远到最近)来堆叠上述演示中的元素：
#d1, #d4, #d2, #d3？
不这是不可能的。您可以走得最远的是#d1、#d4、#d2，如下所示：
#d1 { z-index: -1; position: relative; }
#d2 { }
#d3 { }
#d4 { z-index: -1; position: relative; }..。但是这会导致#d1为#d3创建一个堆叠上下文，这将防止#d3被绘制在#d2或#d4之上，因为#d1的负z索引会导致#d1本身被绘制在#d4下面(因为具有相同堆栈级别的两个框将按源代码顺序绘制，而#d4则出现在#d1之后)和#d2之后。
Stack Overflow用户
发布于 2017-07-21 11:23:53
总之，没有。在不改变HTML的情况下是不行的--但我从你的问题中推测，你想要理解的是CSS。
子项的Z-索引与父级的z-索引相关联。您可以更改D1和D2的层，并将它们前后切换。但是D2的孩子将共享这一层。如下所示：
D1 {z-index:1} // bottom layer
child1{z-index:100}
child2{z-index:2000}
D2 {z-index: 2}
child1{z-index:3}
child2{z-index:50} // top layer请注意，D1:child2 2的索引为2000，但将出现在d2:child2 1后面，尽管索引为3。
Stack Overflow用户
发布于 2017-07-21 11:25:11
如果我正确理解了你的问题，你必须为你想在上面的元素设置高度z-索引。例如：
#d4 {
z-index: 10;
}
#d3 {
z-index: 9;
}id d4将是关于d3的。
Z-索引也支持负值。其他重要的注意事项是DOM元素将直接与父级一起报告。因此，如果一个孩子有z-index: 999，他的父母z-索引: 10，而他的父母是15的兄弟姐妹，那么孩子不会超过父母的兄弟姐妹。
https://stackoverflow.com/questions/45236076
复制相似问题
腾讯云开发者
