CSS z-索引和堆叠上下文
CSS z-索引和堆叠上下文
提问于 2017-07-21 11:05:31
我试图更好地理解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索引是如何工作”的问题，因此它不是这个问题的复制。
这个问题指的是我在上面尽可能详细地介绍的具体情况。我所要求的是对这个具体问题的非常具体的回答--“是的，这可以这样做.”，或者“不，这是不可能实现的，因为.”
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的兄弟姐妹，那么孩子不会超过父母的兄弟姐妹。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45236076
复制相关文章
相似问题
腾讯云开发者
