下午好，
我做了一个非常简单的页面，展示了我们可以用来css我们公司新人的不同职位类型，非常尴尬的是，这暴露了我自己知识上的差距。
我已经在页面上定位了所有元素，但我注意到当页面滚动时，我的相对定位元素将位于我的粘性元素之上。这几乎就像它的z-index高于我的粘性元素 - 但我还没有设置任何z-index值。
这是我提供的代码的正确行为吗？抱歉，如果这真的很简单，它让我坐在这里挠头。
代码笔
body {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
height: 3000px;
}
.relative {
width: 20%;
min-height: 200px;
background-color: dodgerblue;
color: white;
padding: 10px;
position: relative;
}
.sticky {
position: sticky;
background-color: green;
color: white;
padding: 10px;
width: 20%;
height: 200px;
top:0;
}
.fixed {
position: fixed;
padding: 10px;
background-color: aqua;
color: black;
height: 200px;
width: 20%;
right: 200px;
top: 300px;
}
.absolute {
position: absolute;
padding: 10px;
right: 0;
top: 0;
width: 20%;
height: 200px;
background-color: red;
color: white;
}
.static {
position: static;
width: 20%;
background-color: blueviolet;
padding: 10px;
color: white;
height: 200px;
}<body>
<div class="sticky">
This is a sticky div
</div>
<div class="relative">
This is a relative div
</div>
<div class="absolute">
This is an absolute div
</div>
<div class="static">
This is a normal div
</div>
<div class="fixed">
This is a fixed div
</div>
</body>是的，这是正常行为。相对定位的元素显示在源中粘性定位元素之后，因此其自然堆栈级别更高，因此它显示在粘性定位元素上方。请参阅 CSS2 的第 9.9 节或 css-position 的第 11 节。
粘性定位的元素遵循与相对和绝对定位的元素相同的堆叠规则。
如果两个元素位于相同的堆叠上下文中(具有相同的z-index值)，则浏览器将仅查看它们在 dom 中插入的顺序：最后一个元素将出现在前一个元素之上。
以下是有关此主题的详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
当不涉及 z 索引和位置属性时，规则 非常简单：基本上，堆叠顺序与 HTML 中的出现顺序。(好吧，它实际上多了一点 比这复杂，但只要你不使用负数 边距重叠内联元素，您可能不会遇到 边缘情况。
当您将位置属性引入混合时，任何定位 元素(及其子元素)显示在任何元素的前面 未定位的元素。(说一个元素是"定位的"意味着 它具有静态以外的位置值，例如，相对、绝对、 等)
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Z-index 仅适用于已与absolute、relative、fixed一起定位的元素。由于粘滞元素出现在 HTML 中的静态元素之前，因此它将在堆叠顺序中优先。