html - z-index 不能正常工作？

Question

我有 HTML:

<div class="arrow" id="link1">
    <img class="bellow" src="bottom.jpg" width="305" height="229" />
</div>

还有 CSS:

.arrow {
  display: block;
  width: 305px;
  height: 229px;
  z-index: 10;
  position: relative;
  background-image: url(top.png);
}

#link1 {
  background-position: 0 458PX;
  z-index: 10;
  position: absolute;
}

#link1:hover {
  background-position: 0 229px;
  z-index: 10;
  position: absolute;
}

.bellow {
  z-index: 1;
  position: absolute;
}

但是 background-image 没有出现在 bottom.jpg 的顶部 z-index 有什么问题？

Answer 1

您不能将父元素内的元素定位在该父元素后面。

考虑这样一个 HTML 结构:

<div class="level-1">
    <div class="level-2">
        <div class="level-3"></div>
        <div class="level-3"></div>
    </div>
    <div class="level-2">
        <div class="level-3"></div>
        <div class="level-3"></div>
    </div>
</div>
<div class="level-1">
    <div class="level-2">
        <div class="level-3"></div>
        <div class="level-3"></div>
    </div>
    <div class="level-2">
        <div class="level-3"></div>
        <div class="level-3"></div>
    </div>
</div>

为了方便理解，我为每个部门命名了级别等级。

Z-indexing 通过将该 z-index 应用于每个父元素中的其他元素来工作。因此，在根元素上，每个 1 级分区的 z-index 仅适用于其他 1 级分区。就像二级索引只适用于另一个二级索引，三级索引也是如此。

因此索引由内而外:级别 3 索引将在其每个父项下首先排序。请注意，它们的 z-index 不会应用于其他父级中的其他 3 级元素，仅适用于相同父级下的其他元素。一旦这些 3 级元素的排序完成，它们就会被放置到它们的 2 级父元素中。在这一点上，2 级元素根据它们相对于父元素的索引进行排序，然后像 3 级元素一样放置到它们的父元素中，然后 1 级元素完成。

---

因此，按照您的 HTML 结构的设置方式，在一个分区内有一个图像，该图像不能出现在其父级下方。从结构上讲，这无论如何都没有意义。子级意味着包含在父级中，它永远不应该堆叠到其父级。如果你真的想把图像放在分区后面，它应该放在父级的外面并相应地定位。

话虽如此，还是有点hackish workaround ，但它需要从父分区中删除 position: absolute 并使用负 z-index。