Question

我想更好地理解CSS z-index属性和堆叠上下文。

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

基本演示可在下面或this fiddle中找到。

＆＃13;

#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;
}

＆＃13;

<body>
  <div id="d1">#d1
    <div id="d3">#d3</div>
  </div>
  <div id="d2">#d2
    <div id="d4">#d4</div>
  </div>
</body>

＆＃13;

现在，是否可以按以下顺序（最远到最近）堆叠上述演示中的元素：#d1, #d4, #d2, #d3？

（澄清一下，初始演示中的顺序是：#d1, #d3, #d2, #d4）

声明：

在提出这个问题之前，我实际上已经搜索并阅读了z-index和堆叠上下文。我熟悉z-index如何工作的一般规则和规范，以及何时创建堆叠上下文。

因此，这不是一般性的＆＃34;我不明白z-index如何运作＆＃34;问题，因此它不是this question的副本。

这个问题是指我在上面详细介绍的具体案例。我要求的是对这个具体问题的一个非常具体的答案 - 要么＆＃34;是的，这可以这样做......＆＃34;或者＆＃34;不，这不可能实现，因为......＆＃34;

Answer 1

现在，是否可以按以下顺序（最远到最近）堆叠上述演示中的元素：#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-index导致#d1本身被绘制在#d4下方（因为两个具有相同堆栈级别的框将按源顺序绘制，#d4来在#d1）和#d2之后。

Answer 2

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

子项的z-index与父项的z-index相关联。您可以更改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的索引为2000但会出现在D2：child1后面，即使索引为3。

Answer 3

如果我理解你的问题，你必须为你想要的元素设置高度z-index。例如：

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

id d4将是关于d3。

Z-index也支持负值。其他重要的注意事项是DOM元素将直接与父级报告。因此，如果一个孩子的z-index：999，他的父母z-index：10，以及他父母15的兄弟，孩子将不会超过父母兄弟。

CSS z-index和堆叠上下文

声明：

3 个答案: