Question

其他所有内容都很好，而且我无法弄清楚为什么<span>上的<a>工具提示不会在<a> 3前面堆叠，当<a> 2在<a> 1之前完全堆叠时几乎完全相同的情况。

codepen：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

子z-index元素的span在其父元素具有相同z-index且参与stacking context时无效。

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

如果您希望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问题，你可以修复它删除所有＆＃39; z-index：8;＆＃39;来自css。

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

为什么这个元素没有根据其z-index进行堆叠？

2 个答案: