Question

我有一个简单的 HTML 和 CSS 叠加层，可在某些操作时触发。我想在页面的某些部分显示叠加层。我的左侧有侧边栏菜单，附在主体上。使用 position: fixed; 可以很好地创建覆盖所有页面的叠加层，但我希望叠加层仅覆盖其显示位置旁边的页面，它必须设置在当前内容的顶部，就像我使用 {{1 }} 我怎样才能做到这一点。放置在页面正文内容中的 HTML 代码：

position: fixed;

.backdrop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: black;
    opacity: 0.3;
    background-size: 100% 100%;
}
.loadingSpan {
    display: inline-block;
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: red;
}

过度工作正常，但它与侧边菜单一起覆盖了整个页面，所以我想解决这个问题只是为了覆盖其当前代码所在的页面。侧边菜单：

<div class="backdrop" id="LoadingContainer">
    <div class="loadingSpan">
        <h1 id="LoadingText">Loading</h1>
        <div class="spinner-grow" role="status">
            <span class="sr-only">Loading</span>
            <span class="sr-only"></span>
        </div>
        <div class="spinner-grow" role="status">
            <span class="sr-only">Loading</span>
        </div>
        <div class="spinner-grow" role="status">
            <span class="sr-only">Loading</span>
        </div>
    </div>
</div>

CSS：

<section class="sidebar">
        <ol class="quickinfo">
            <li class="quickinfo_item">
                <span class="quickinfo_text">Menu1</span>
                <span class="quickinfo_text">Menu2</span>
            </li>
     </ol>
    </section>

布局：

.sidebar {
  background: #222d32;
  flex: 1;
  max-width: 15%;
  height: 100%;
  color: white; }
  .sidebar_item {
    display: flex; }

Answer 1

更改 .backdrop position: absolute; 并将其容器设置为 position: relative;

fixed 意味着它的位置是相对于视口的（通常）。绝对表示相对于包含块

Answer 2

容器使用 position: relative，覆盖层使用 position: absolute。然后将覆盖层放入容器内。示例：

body {
font-family: sans-serif;
margin: 0;
}
.container {
width: 300px;
height: 200px;
border: 1px solid black;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(0,0,0,0.5);
color: white;
}

<h1>Outside the Container</h1>
<div class="container">
Container Content
<div class="overlay">
Overlay Content
</div>
</div>

如何制作覆盖页面特定部分的叠加层？

2 个答案: