为何z-index在span中不生效？div.overlay覆盖span文本问题

问题根源是堆叠上下文的影响：

• .baner 设置了 position: absolute 和 z-index: 9，会创建独立的堆叠上下文，内部的 span 即使设置极高的 z-index，也只能在 .baner 的上下文内生效。
• 外部的 .overlay 属于另一个堆叠上下文，z-index: 99 会让它覆盖在 .baner 整个上下文之上，自然也盖住了里面的文本。

两种可行的修改方案 #

方案1：将overlay移入baner容器内（推荐） #

把 .overlay 放到 .baner 里面，让它和 span 处于同一个堆叠上下文，此时 span 的高 z-index 就能生效，文本会显示在overlay上方。

修改后的HTML：

<article id="top" class="wrapper style1">
  <div class="container">
    <div class="row">
      <div class="slideshow">
        <ul class="baner">
          <li><span>SKUP AUT SPRAWNYCH I USZKODZONYCH <br>GOTÓWKA DO RĘKI</span></li>
          <li><span>SKUP AUT POZNAŃ I WIELKOPOLSKA <br>ZADZWOŃ</span></li>
          <li><span>SKUP AUT SPRAWNYCH I <br>USZKODZONYCH - GOTÓWKA DO RĘKI</span></li>
          <div class="overlay"></div> <!-- 移到baner内部 -->
        </ul>
      </div>
    </div>
  </div>
</article>

方案2：提升baner的z-index #

如果不想调整HTML结构，直接把 .baner 的 z-index 设置得比 .overlay 高，让整个baner上下文覆盖在overlay之上：

修改后的CSS：

.baner {
  position: absolute;
  padding-left: 0;
  width: 100%;
  height: 450px;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 100; /* 数值高于overlay的99 */
}

两种方案都能解决问题，方案1更符合语义化，因为overlay本来就是轮播组件的一部分。

内容的提问来源于stack exchange，提问作者noreplyuser