覆盖整个页面，除了一个元素
Posted
技术标签:
【中文标题】覆盖整个页面，除了一个元素【英文标题】：Overlay entire page except one element 【发布时间】：2022-01-14 22:05:32 【问题描述】：我正在使用 Angular flex 布局和大部分自定义 CSS 作为布局，我正在尝试找到一种方法来创建覆盖整个页面（除了一个元素）的覆盖效果。我最初的想法是使用 CDK 叠加库来创建效果。但这需要您在页面上包含一个 ng-template，您要呈现的内容就位于其中。
我想要做的只是在除指定元素之外的所有内容的顶部显示叠加层，而不仅仅是 ng 模板中的内容。我意识到这可能是不可能的，所以我的第二个想法是，也许您可以以某种方式创建一个“虚拟”元素，该元素与您要覆盖的元素位于同一位置，但看起来好像覆盖只是覆盖了所有内容，但指定的元素。
这有点像我现在所处的位置，我已经让叠加层发挥作用，但我只是不明白需要发生什么才能让它做到这一点。在这个例子中，也许只是让它覆盖除了你点击来切换它的按钮之外的所有东西？
https://stackblitz.com/edit/angular-ivy-aftubj
【问题讨论】：
【参考方案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>【讨论】：
我正在使用 angular flex 和 angular cdk 覆盖，所以我不能在不破坏布局的情况下更改元素的位置。对于内容区域中的内联内容来说，这可能已经足够简单了，但是如果我将它应用到我的 stackblitz 中的左侧导航，例如它会搞砸一切。以上是关于覆盖整个页面，除了一个元素的主要内容，如果未能解决你的问题，请参考以下文章
css 关于width：100%的问题 本身的页面超过了整个屏幕的大小，也就是有滚动条，但是它只能覆盖屏幕大小