时间戳

首页 > 解决方案 > 如何创建仅覆盖某个容器而不是整个 html 页面的叠加层？

javascript - 如何创建仅覆盖某个容器而不是整个 html 页面的叠加层？

问题描述

我正在尝试创建一个覆盖容器或模式，它只覆盖页面上的某个容器。我有这个。

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}
</style>
</head>
<body>

<div id="overlay" onclick="off()"></div>

<div style="padding:20px; border: 3px solid black;" id="my_main_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>

但是这个覆盖覆盖了所有页面。而我希望它只覆盖而 my_main_div不是其他任何东西。我怎样才能做到这一点？

标签： javascripthtml

解决方案

使用相对作为位置。

function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}
.row {
  position: relative;
}
#overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}
<div class="row">
<div id="overlay" onclick="off()"></div>

<div style="padding:20px; border: 3px solid black;" id="my_main_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>
</div>

推荐阅读