Html 为什么这个元素没有按照它的z指数叠加？

其他一切都很好，我只是不明白为什么工具提示会显示在屏幕上

缩写HTML

 <div class=" darkYellow100 pix">
    <a class="numbers tooltipTL" style="top: 70%; left: 50%;">
            1
          <span style="z-index: 10;">
          Talk 
          </span>
   </a>
   <a class="numbers tooltipBL" style="top: 51%; left: 65%;">
            2
          <span>
          Talk
          </span>
  </a>
  <a class="numbers tooltipB" style="top: 32.5%; left: 30%;">
            3
          <span style="z-index: 10;">
          Talk
          </span>
  </a>
  <a class="numbers tooltipB" style="top: 58%; left: 75%;">
            4
          <span>
          Talk
          </span>
  </a>
  <img class="buttontop" src="http://www.moonwards.com/img/Cernan's-Promise-Longshot.jpg" alt="Teacup crater with first structures">
</div>

当其父元素具有相同的z索引并且参与到跨元素中时，子元素的z索引不会产生任何影响

例如，锚元素1号和锚元素3号的z索引都为8。因为它们具有相同的z索引，所以它们根据它们在DOM中的顺序进行堆栈。在本例中，锚定元素编号3显示在锚定元素编号1之后，这意味着它将显示在锚定元素编号1和工具提示的上方

如果希望尊重span元素的z索引，则需要从父锚点元素中删除z索引。这样做时，堆叠将基于跨度元素的z索引，因为父元素没有被堆叠

当然，您也可以只更改父元素的z索引

a.tooltipTL {
  position: absolute;
  z-index: 9;
}

..或者，您可以根据希望DOM元素堆叠的方式对其重新排序。

当其父元素具有相同的z索引并且参与了该操作时，子元素的z索引没有任何区别

例如，锚元素1号和锚元素3号的z索引都为8。因为它们具有相同的z索引，所以它们根据它们在DOM中的顺序进行堆栈。在本例中，锚定元素编号3显示在锚定元素编号1之后，这意味着它将显示在锚定元素编号1和工具提示的上方

如果希望尊重span元素的z索引，则需要从父锚点元素中删除z索引。这样做时，堆叠将基于跨度元素的z索引，因为父元素没有被堆叠

当然，您也可以只更改父元素的z索引

a.tooltipTL {
  position: absolute;
  z-index: 9;
}

---

..或者，您可以根据希望DOM元素堆叠的方式对其重新排序。

只是一个z-index问题，您可以通过删除所有“z-index:8；”来修复它来自css

`http://codepen.io/anon/pen/GpVoXE?editors=110`

---

只是一个z-index问题，您可以通过删除所有“z-index:8；”来修复它来自css

`http://codepen.io/anon/pen/GpVoXE?editors=110`

---

移除锚点的z索引就可以做到这一点。我很惊讶，为什么他们不在照片后面呢？但我要了。也许我应该做一个彻底的浏览器兼容性测试…@kimholder它们不会出现在img元素后面，因为它们是绝对定位的，而img元素默认设置为position:static。如果要添加相对于img元素的position:，那么它将显示在锚点元素上方，因为它在DOM中出现在锚点元素之后，并且它们中没有任何一个具有z索引。删除锚点的z索引可以做到这一点。我很惊讶，为什么他们不在照片后面呢？但我要了。也许我应该做一个彻底的浏览器兼容性测试…@kimholder它们不会出现在img元素后面，因为它们是绝对定位的，而img元素默认设置为position:static。如果要添加相对于img元素的position:relative，那么它将出现在锚元素的上方，因为它在DOM中出现在锚元素之后，并且它们都不再具有z索引。