父元素设置sticky吸顶后如何保持子元素相对父元素的定位关系

失效原因 #

你之前的方案出现异常主要有两个核心问题：

• 子元素设置absolute定位后脱离正常文档流，父级容器没有设置明确高度，会出现高度塌陷，高度为0的元素触发sticky逻辑时无法正确锚定位置
• 三个子元素同时用absolute定位，你设置的top值越小元素位置越靠上，会出现叠加覆盖，也不符合预期的层级顺序要求

正确实现方案 #

核心逻辑：不需要给子元素设置绝对定位，父元素触发sticky固定后，正常文档流内的子元素天然会保持和父元素的相对位置，层级顺序也不会改变。如果需要控制子元素的相对位置，用padding、margin或者flex布局调整即可，需要自定义层级的话加z-index控制。

修正后的代码如下：

CSS代码

.push {
  height: 600px;
  width: 10px;
  background: #f0f0f0;
}

.parent {
  position: sticky;
  top: 0;
  background: #ffffff;
  /* 父元素基础内边距，对应你原本要的子元素最小top偏移3px */
  padding: 3px 0;
}

.child1 {
  margin-top: 7px;
  /* 层级最低，放在最下面 */
  z-index: 1;
}

.child2 {
  margin-top: 2px;
  z-index: 2;
}

.child3 {
  z-index: 3;
}

HTML代码

<div class="push"></div>

<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
  <div class="child3">Child 3</div>
</div>

<div class="push"></div>

特殊场景补充 #

如果你的业务场景确实需要子元素使用绝对定位，只要给父级容器设置明确的height属性，避免高度塌陷，父元素触发sticky固定后，子元素依然会保持相对于父元素的绝对定位偏移，不会出现位置错乱。

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