Question

说我有以下HTML：

＆＃13;

.wrapper {
  position: relative;
  z-index: 99;
}

.red, .green {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  z-index: 400;
}

.green {
  background: green;
}

＆＃13;

<div class="wrapper">
  <div class="red"></div>
</div>
<br>
<div class="wrapper">
  <div class="green"></div>
</div>

＆＃13;

我希望红色框出现在绿色框的顶部。但它并没有。 .wrapper只有z-index 99，而.red只有z-index: 100。顶部是否有顶级产品.red？

提前致谢！

Answer 1

您不希望将包含这两个div的包装器包含z-index，因为它包含这两个div。摆脱z-index上的.wrapper。并将.red班级z-index保留为400，红色框将显示在绿色框的顶部：

＆＃13;

.wrapper {
  position: relative;
}

.red, .green {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  z-index: 400;
}

.green {
  background: green;
}

＆＃13;

<div class="wrapper">
  <div class="red"></div>
</div>
<br>
<div class="wrapper">
  <div class="green"></div>
</div>

＆＃13;

Answer 2

您将两个容器都设置为z-index: 99。因此，由于两者的z-index相同，因此源顺序决定z轴上的放置。

带有绿色div的.wrapper元素在代码中排在最后，因此它占优势。（切换.wrapper元素的顺序，红色胜出。）

红色孩子的z-index: 400无效，因为重要的stacking order是容器的。{/ p>

试试这个：

＆＃13;

.wrapper:first-child {
  position: relative;
  z-index: 2;
}
.wrapper:last-child {
  position: relative;
  z-index: 1;
}
.red, .green {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
}

.green {
  background: green;
}

＆＃13;

<div class="wrapper">
  <div class="red"></div>
</div>
<br>
<div class="wrapper">
  <div class="green"></div>
</div>

＆＃13;

CSS绝对定位＆amp; Z-指数

2 个答案: