为什么这个元素没有根据它的 z-index 堆叠？

Question

其他一切都很好地堆叠，我只是想不通为什么 <a> 1 上的 <span> 工具提示没有堆叠在 <a> 3 前面，当 <a> 在几乎完全相同的情况下，2 叠在 <a> 1 前面。

代码笔：http://codepen.io/briligg/pen/epqNLd?editors=110

缩写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>

缩写CSS

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

a.tooltipTL span {
  position: absolute;
  width: 350px;
  padding: 8px;
  color: #FFF;
  height: auto;
  line-height: 1.2em;
  text-align: justify;
  visibility: hidden;
  border-radius: 6px;
}
a:hover.tooltipTL span {
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.8);
  bottom: 30px;
  left: -325px;
  z-index: 10;
}
a.tooltipBL {
  position: absolute;
  z-index: 8;
}
a.tooltipBL span {
  position: absolute;
  width: 350px;
  padding: 8px;
  color: #FFF;
  height: auto;
  line-height: 1.2em;
  text-align: justify;
  visibility: hidden;
  border-radius: 6px;
}
a:hover.tooltipBL span {
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.8);
  right: 100%;
  top: 50%;
  z-index: 10;
}
.darkYellow100 {
  background-color: rgba(50, 50, 0, 0.7);
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;
}

.pix {
  position: relative;
  top: 0;
  left: 0;
}

Answer 1

子 span 元素的 z-index 在它们的父元素具有相同 z-index 并且参与 stacking context 时没有区别。

例如，锚元素一号和锚元素三的 z-index 都为 8。由于它们具有相同的 z-index，因此它们根据它们在 DOM 中的顺序堆叠。在这种情况下，锚元素三出现 在锚元素一之后 ，这意味着它将出现在锚元素一和工具提示之上。

如果您希望 span 元素的 z-index 得到尊重，您需要从父定位元素中删除 z-index。这样做时，堆叠将基于 span 元素的 z-index（因为未堆叠父元素）。

Updated Example

当然，你也可以只改变父元素的z-index。

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

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

Answer 2

只是一个 z-index 问题，您可以修复它，从 css.

中删除所有 'z-index: 8;'

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

为什么这个元素没有根据它的 z-index 堆叠？

Why is this element not stacking according to its z-index?

html

css

z-index