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

Question

我有一个简单的 HTML 和 CSS 叠加层，可在特定操作时触发。我想在页面的特定部分显示叠加层。我在主体的左侧有侧边栏菜单。使用 position: fixed; 可以很好地创建覆盖所有页面的叠加层，但我希望覆盖层仅覆盖显示在旁边的页面，它必须设置在当前内容之上，就好像我正在使用 position: fixed; 我该怎么做。 HTML 放置在页面正文内容中的代码：

.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>

overly 工作正常，但它覆盖了整个页面以及侧面菜单，所以我想修复它只是为了覆盖其当前代码所在的页面。侧边菜单：

<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>

CSS:

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

布局：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <section class="container_body container-fluid">
            @{ Html.RenderAction("Sidebar", "Ui"); }
            <section class="content container-fluid">
                @RenderBody()
            </section>
        </section>
</body>
</html>

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>

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

How to make overlay that covers certain part of the page?

html

javascript

css

overlay