CSS相对定位元素默认z-index及relative覆盖sticky问题咨询

嘿，很高兴能帮你理清这两个关于CSS定位和z-index的问题！

1. 相对定位（relative positioned）元素的默认z-index值是多少？ #

相对定位元素的默认z-index值是auto，而不是0。这里需要注意auto和0的关键区别：

• z-index: auto不会创建新的堆叠上下文，元素的堆叠顺序由它在DOM中的位置以及父元素的堆叠上下文决定；
• 若显式设置z-index: 0，则会创建一个新的堆叠上下文，这会改变它与其他元素的堆叠规则。

2. 未设置z-index时，relative元素覆盖sticky元素是正常行为吗？ #

这是完全正常的行为，原因和CSS的堆叠顺序规则有关，结合你的代码来拆解：

核心规则：无z-index的定位元素，堆叠顺序由DOM顺序决定 #

所有非static定位的元素（包括relative、sticky、absolute、fixed），当未设置z-index时，它们的堆叠优先级遵循**“后来居上”**原则——在DOM中出现位置越靠后的元素，堆叠层级越高，会覆盖前面的同优先级定位元素。

你的代码场景分析 #

看你的HTML结构：

<div class="sticky"> This is a sticky div </div>
<div class="relative"> This is a relative div </div>

.sticky元素在DOM中排在.relative前面，两者都是非static定位且z-index为默认的auto，所以.relative的堆叠层级更高。当页面滚动时，.sticky会固定在顶部，但.relative元素进入视口后，就会按照堆叠规则覆盖在.sticky之上。

解决方案 #

如果希望.sticky元素始终在最上层，只需给它设置一个大于auto的z-index值即可，比如：

.sticky {
  position: sticky;
  background-color: green;
  color: white;
  padding: 10px;
  width: 20%;
  height: 200px;
  top:0;
  z-index: 1; /* 添加这一行 */
}

这样.sticky就会拥有更高的堆叠层级，不会被.relative覆盖了。

内容的提问来源于stack exchange，提问作者Xoog