jquery - 具有绝对位置的多个叠加层，固定到它们的父元素，作为相同的标记

Question

我需要创建一个在页面滚动时停留在屏幕上而不移动到顶部的叠加层，就像 position: fixed 元素所做的那样。但我需要将其编写为将在 body 和任何 div 中重复的相同代码，因为每个 overlay-wrap 元素都将被添加动态地使用 jQuery 脚本，将在某些事件上触发。

将从脚本中添加的元素的标记(片段是一个简化的示例，生产代码会略有不同):

<div class="overlay-wrap">
    <div class="overlay flexbox">
        <div class="size-small shape-circle bgclr1 spc-small"></div>
    </div>
</div>

它在每个 div.shape-square 和 body 中保持相同。

所以，我需要我的 overlay-wrap 元素作为 position: fixed 元素(在滚动父元素时留在屏幕上)和作为 position: relative 元素(当他们的祖 parent ，例如 body 正在滚动时，与 parent 一起移动)。

.size-medium {
    width: 100px;
    height: 100px;
}
.size-small {
    height: 5px;
    width: 5px;
}
.shape-square { border-radius: 0%; }
.shape-circle { border-radius: 50%; }
.bgclr0 { background-color: #e6ac0c; }
.bgclr1 { background-color: #0e6060; }
.bgclr2 { background-color: #e60c0c; }
.spc-small { margin: 5px; }
.flexbox {
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay-wrap {
    position: relative;
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(192,192,192,0.3), rgba(255,0,0,0.3));
}

<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="size-medium shape-square bgclr0 spc-small">
    <div class="overlay-wrap">
        <div class="overlay flexbox">
            <div class="size-small shape-circle bgclr1 spc-small"></div>
        </div>
    </div>
</div>
<div class="overlay-wrap"> 
    <div class="overlay flexbox">
        <!-- This one should overlay every other element and be an overlay for the whole body -->
        <div class="size-small shape-circle bgclr1 spc-small"></div>
    </div>
</div>

如您所见，底部有一个 .overlay-wrap，在每个其他带有自己的 overlay-wrap 的橙色方形 div 之后。它应该覆盖所有这些，但它没有。

如何使用纯 HTML/CSS 或更简单的 jQuery 来实现？

主要目标浏览器是 Internet Explorer 11。因此，例如，我不能使用 position: sticky。

Answer 1

现有的最佳解决方案是使用直接子选择器和 position:fixed 的附加 CSS 样式，如下所示:

body>.overlay-wrap{position:fixed;}