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没有显示在底部.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级除法。就像2级索引只适用于另一个2级索引，而3级索引也是如此。

因此从内到外编制索引：第3级索引将在其父母的每个下面首先进行排序。请注意，他们的z-index 不适用于其他父级中的其他级别3元素，仅适用于相同父级下的其他元素。一旦完成了对这些3级元素的排序，它们就会被放入它们的2级父级。此时，level-2元素根据它们相对于其父元素的索引进行排序，然后以与level-3元素相同的方式放入其父级，然后完成level-1元素。

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

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

Answer 2

z-index仅适用于absolute/fixed/relative个职位。

写：

.arrow{position:relative;}

此外，

从div中删除image。

它应该有用。

Fiddle here.

Answer 3

body（或任何其他定位的父元素）是对其的引用子元素和父元素

来源：z-index between Children and Parents

这意味着您父级的z-index也适用于子元素。子元素（图像）也将采用z-index: 10;。父母和孩子的z-index均为10，孩子实际上将在父母身上呈现。

要解决此问题，您甚至不应该向父级提供z-index，而应仅向子级（图像）提供：

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

如果图像的值较低，则为默认值，因此将位于其父级下方。

z-index工作不正常？

3 个答案:

jsFiddle