CSS z-index 和堆叠上下文

Question

我试图更好地理解 CSS z-index 属性和堆栈上下文。

作为练习，我构建了一个包含一些元素的小 HTML 演示，我尝试仅使用 z-index 定位以各种不同的顺序对它们进行排序。

下面或 this fiddle 中提供了基本演示。

#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 如何工作以及何时创建堆栈上下文的一般规则和规范。

因此，这不是一个一般的 "I do not understand how z-index works" 问题，因此它不是 .

的重复问题

这个问题是指我在上面尽可能详细地介绍的具体案例。我要求的是对该特定问题的非常具体的答案 - "Yes, this can be done like so..." 或 "No, this can't be achieved, because..."

Answer 1

简而言之，没有。不是没有改变你的 HTML - 但我从你的问题中假设它是你试图理解的 CSS。

child 的

z-index 与 parent 的 z-index 相关联。您可以更改 D1 和 D2 的图层并前后切换。但 D2 的 child 将共享该层。像这样：

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 的索引为 2000，但会出现在 D2:child1 后面，即使它的索引为 3。

Answer 2

如果我对你的问题理解正确的话，你必须为你想要在上面的元素设置高度 z-index。例如：

#d4 {
    z-index: 10;
}
#d3 {
    z-index: 9;
}

id d4 将关于 d3。

Z-index也支持负值。另一个重要的注意事项是 DOM 元素将直接与 parent 一起报告。所以如果一个 child 有 z-index: 999 his parent z-index: 10, and sibling of his parent 15, child 不会结束parent 兄弟姐妹。

Answer 3

Now, is it possible to stack the elements in the above demo in the following order (farthest to closest): #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 或 [=13= 之上] 因为 #d1 的负 z-index 导致 #d1 本身被绘制在 #d4 下面（因为具有相同堆栈级别的两个框将按源顺序绘制，并且 #d4 在 #d1) 和 #d2.

之后

CSS z-index 和堆叠上下文

CSS z-index and stacking contexts

html

css

z-index

免责声明：