CSS弹窗滚动时显示页面底层图文，求问题排查与解决

我来帮你搞定这个弹窗内容被背后页面元素穿透的问题，这其实是CSS堆叠上下文（stacking context）的常见坑点。咱们一步步来分析和解决：

问题原因 #

你遇到的核心问题是弹窗的层级不够高，导致页面里的图片、文本等元素能“钻”到弹窗上面。看你提供的CSS代码，有两个关键问题：

1. .overlay 没有设置 z-index 属性，浏览器会默认它的堆叠层级低于很多页面元素（尤其是那些设置了定位的元素）
2. .overlay:target 里的 opacity: 10 是无效值——opacity的合法范围是0到1，浏览器会把它解析成1，但这只是小问题，不是穿透的主因

修复方案 #

只需要给弹窗的遮罩层（.overlay）添加足够高的z-index，同时修正无效的opacity值，就能彻底解决穿透问题。以下是修改后的完整CSS代码：

<style type='text/css'> 
.overlay { 
  position: fixed; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  background: rgba(0, 0, 0, 0.7); 
  transition: opacity 500ms; 
  visibility: hidden; 
  opacity: 0; 
  z-index: 1000; /* 添加这行，确保遮罩层在所有页面元素之上 */
} 
.overlay:target { 
  visibility: visible; 
  opacity: 1; /* 修正为合法的opacity值 */
} 
.popup { 
  margin: 70px auto; 
  padding: 20px; 
  background: #fff; 
  border-radius: 5px; 
  width: 40%; 
  position: relative; 
  transition: all 5s ease-in-out; 
  /* 可选：如果弹窗内部元素还是有层级问题，可以添加z-index */
  z-index: 1001; 
} 
.popup h2 { 
  margin-top: 0; 
  color: #333; 
  font-family: Tahoma, Arial, sans-serif; 
} 
.popup .close { 
  position: absolute; 
  top: 20px; 
  right: 30px; 
  transition: all 200ms; 
  font-size: 30px; 
  font-weight: bold; 
  text-decoration: none; 
  color: #333; 
} 
.popup .close:hover { 
  color: #06D85F; 
} 
.popup .content { 
  max-height: 30%; 
  overflow: auto; 
} 
@media screen and (max-width: 700px){ 
  .box{ width: 70%; } 
  .popup{ width: 70%; } 
} 
</style>

关键修复点解释 #

• z-index: 1000：给遮罩层设置一个足够高的层级（你可以根据页面实际情况调整数值，只要比其他元素的z-index高就行），这样遮罩层会完全覆盖住背后的页面内容，阻止它们穿透到弹窗区域
• 修正opacity: 1：虽然这个不影响层级，但保持代码的规范性很重要
• 可选的z-index: 1001：给弹窗本身设置比遮罩层更高的层级，确保弹窗内容始终在遮罩层之上（不过因为弹窗是遮罩层的子元素，默认会继承父元素的堆叠上下文，这一步不是必须的，但加上更稳妥）

额外注意事项 #

如果页面里有其他设置了position: fixed或position: absolute的元素，并且它们的z-index高于1000，你需要把.overlay的z-index调整得比那些元素更高，才能完全避免穿透。

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