Question

下午好，

我已经制作了一个非常简单的页面，展示了我们可以在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>

Answer 1

如果两个元素位于相同的堆叠上下文中（具有相同的z-index值），则浏览器将只查看它们在dom中插入的顺序：最后一个元素将显示在顶部以前。
以下是有关此主题的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

Answer 2

是的，这是正常行为。相对定位的元素出现在源中粘性定位元素之后，因此其自然堆叠级别更高，因此它出现在粘性定位元素上方。请参阅section 9.9 of CSS2或section 11 of css-position。

粘性定位元素遵循相对且绝对定位的元素相同的堆叠规则。

Answer 3

当不涉及z-index和position属性时，规则非常简单：基本上，堆叠顺序与 HTML中的外观顺序。（好吧，实际上还有一点点比这复杂，但只要你没有使用否定边距重叠内联元素，你可能不会遇到边缘情况。）

当你将position属性引入混音时，任何定位元素（及其子元素）显示在任何元素的前面非定位元素。（说一个元素是“定位”意味着它有一个非静态的位置值，例如相对，绝对，等）

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Z-index仅适用于已定位absolute，relative，fixed的元素。由于粘性元素出现在HTML中的静态元素之前，因此它将优先于堆叠顺序。

相对定位元素的默认z-index是什么？

3 个答案: