覆盖整个页面，除了一个元素

Question

我正在使用 Angular flex 布局和大部分自定义 CSS 作为布局，我正在尝试找到一种方法来创建覆盖整个页面（除了一个元素）的覆盖效果。我最初的想法是使用 CDK 叠加库来创建效果。但这需要您在页面上包含一个 ng-template，您要呈现的内容就位于其中。

我想要做的只是在除指定元素之外的所有内容的顶部显示叠加层，而不仅仅是 ng 模板中的内容。我意识到这可能是不可能的，所以我的第二个想法是，也许您可​​以以某种方式创建一个“虚拟”元素，该元素与您要覆盖的元素位于同一位置，但看起来好像覆盖只是覆盖了所有内容，但指定的元素。

这有点像我现在所处的位置，我已经让叠加层发挥作用，但我只是不明白需要发生什么才能让它做到这一点。在这个例子中，也许只是让它覆盖除了你点击来切换它的按钮之外的所有东西？

https://stackblitz.com/edit/angular-ivy-aftubj

Answer 1

我会尝试这样的事情：用 div 包装你的目标元素。包装器将具有与您的元素（块、内联块、...）和 position: relative 相同的 CSS display 类型。显示叠加层时，将包装器的宽度和高度设置为当前大小（以保持布局不变），并将目标元素设置为 position: absolute; z-index：高于叠加层。隐藏叠加层时还原更改。如果您的目标元素具有固定尺寸，则可以避免动态设置这些值。

window.addEventListener('load', () => {
  document.getElementById('hide-button').addEventListener('click', () => {
    document.getElementById('overlay').style['display'] = 'none';
  });
});

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: gray;
  opacity: 0.5;
  z-index: 1;
}

.wrapper {
  border: 1px solid green;
  position: relative;
  margin: 4rem;
}

.target-element {
  background-color: white;
  position: absolute;
  z-index: 2;
}

.wrapper, .target-element {
  width: 15em;
  height: 1.5em;
}

<!DOCTYPE html>
<html>
<body>
  <h1>Overlay playground</h1>
  <div class="wrapper">
    <div class="target-element">
      This should stay above the overlay.
    </div>
  </div>
  <div id="overlay">
    <button id="hide-button" style="margin: 2rem 0 0 20rem">Hide overlay</button>
  </div>
</body>
</html>