如何创建仅覆盖指定容器而非整个HTML页面的Overlay？

你遇到的问题核心是定位上下文的问题：原来的#overlay使用了position: fixed，这个定位方式是相对于整个浏览器视口的，所以会自动铺满全屏。要让它只覆盖my_main_div，我们只需要调整定位规则和DOM结构，具体操作如下：

关键调整步骤 #

• 给目标容器my_main_div添加position: relative：这会让它成为内部绝对定位元素的参考上下文，内部的绝对定位元素会以它的边界为基准。
• 修改#overlay的定位方式：把position: fixed改为position: absolute，同时保持width: 100%、height: 100%、top: 0、left: 0，这样它就会完全填满父容器的空间。
• 调整DOM结构：把#overlay元素移动到my_main_div内部，确保它的定位参考是这个目标容器。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
#overlay {
  position: absolute; /* 改成绝对定位 */
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

#my_main_div {
  padding:20px;
  border: 3px solid black;
  position: relative; /* 添加相对定位，作为overlay的定位上下文 */
}
</style>
</head>
<body>
<div style="padding:20px;">
  <!-- 这里是容器外的内容，不会被overlay覆盖 -->
  <p>这是容器外的内容，不会被遮罩覆盖</p>
</div>

<div id="my_main_div">
  <!-- 把overlay放到目标容器内部 -->
  <div id="overlay" onclick="off()"></div>
  
  <h2>Overlay</h2>
  <p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
  <button onclick="on()">Turn on overlay effect</button>
</div>

<script>
function on() {
  document.getElementById("overlay").style.display = "block";
}
function off() {
  document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>

效果说明 #

现在点击按钮后，overlay只会覆盖my_main_div的区域，容器外的内容不会被遮罩影响。同时原来的显示/隐藏逻辑完全保留，不需要修改JS代码。

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