如何让JavaScript高亮span显示在footer背景与内部元素之间？

这个问题我之前也踩过坑！核心是堆叠上下文在搞鬼——你调整z-index没用，大概率是因为你的footer设置了position: fixed，这会自动创建一个独立的堆叠上下文，普通的z-index调整根本突破不了这个上下文的层级限制。下面给你两个靠谱的解决方案：

方案一：把高亮Span放到Footer内部（推荐） #

这种方式最直观，利用Footer内部的堆叠层级关系来实现：

1. 给Footer设置一个基础的z-index（比如1），确保它的堆叠上下文层级正常；
2. 把高亮Span作为Footer的第一个子元素，设置position: absolute和低于内部内容的z-index；
3. 给Footer里的所有内容容器加position: relative和更高的z-index，让它们显示在高亮层上面。

代码示例 #

.footer {
  background-color: rgba(70, 70, 70, .5);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 100px;
  z-index: 1; /* 创建Footer的堆叠上下文 */
  position: relative; /* 让内部absolute元素以它为基准 */
  overflow: visible; /* 防止高亮Span被裁剪 */
}

/* 高亮Span */
.highlight-span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 0, 0.3);
  z-index: 1; /* 在Footer上下文里，层级低于内部内容 */
}

/* Footer内部内容容器 */
.footer-content {
  position: relative; /* 让z-index生效 */
  z-index: 2; /* 比高亮Span层级高，显示在最上层 */
  /* 其他样式：颜色、间距等 */
}

对应的HTML结构：

<footer class="footer">
  <span class="highlight-span"></span>
  <div class="footer-content">
    <!-- 这里放Footer里的文字、链接、按钮等内容 -->
    版权所有 © 2024 | 联系我们
  </div>
</footer>

方案二：拆分Footer的背景与内容（适合高亮Span必须在Footer外部的场景） #

如果高亮Span没办法放到Footer内部，那就把Footer拆成两个独立元素：背景层和内容层，让高亮Span夹在中间：

1. 单独做一个footer-bg元素，负责半透明背景，设置较低的z-index；
2. 高亮Span设置中间的z-index，和背景层位置完全重合；
3. 单独做一个footer-content元素，负责Footer里的内容，设置最高的z-index。

代码示例 #

/* Footer背景层 */
.footer-bg {
  background-color: rgba(70, 70, 70, .5);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 100px;
  z-index: 1;
}

/* 高亮Span */
.highlight-span {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: calc(50px + 100px + 100%); /* 对应Footer的内边距+高度，根据实际调整 */
  background-color: rgba(255, 255, 0, 0.3);
  z-index: 2;
}

/* Footer内容层 */
.footer-content {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 100px;
  z-index: 3;
  pointer-events: auto; /* 确保内容可点击，避免被下层元素挡住交互 */
  /* 其他样式：颜色、间距等 */
}

对应的HTML结构：

<div class="footer-bg"></div>
<span class="highlight-span"></span>
<div class="footer-content">
  <!-- Footer内部内容 -->
  版权所有 © 2024 | 联系我们
</div>

为什么之前调整z-index没用？ #

因为当你给footer设置position: fixed时，浏览器会自动为它创建一个独立的堆叠上下文。在这个上下文里，所有子元素的z-index只在内部生效；而如果高亮Span在Footer外面，它的z-index只能和Footer的堆叠上下文层级对比——如果Footer的堆叠上下文层级更高，Span就会被压在Footer背景下面，怎么调z-index都没用。

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