CSS position属性问题求助：sticky失效与absolute溢出容器

原始代码 #

CSS #

* {
  margin: 0;
  padding: 0;
}

p {
  text-align: justify;
}

.container {
  margin: 15px auto;
  border: 2px solid #FF0000;
  background-color: #69D818;
  width: 80%;
  height: 6000px;
}

h1 {
  background-color: #0013FF;
}

#first {
  position: sticky;
  top: 10px;
}

#second {
  position: fixed;
  top: 200px;
}

#third {
  position: absolute;
  width: 100%;
  top: 250px;
}

#fourth {
  position: relative;
  top: 50px;
}

HTML #

<div class="container">
  <h1 id="first">Position Sticky</h1>
  <h1 id="second">Position Fixed</h1>
  <h1 id="third">Position Absolute</h1>
  <h1 id="fourth">Position Relative</h1>
</div>

问题1：position: sticky元素向下滚动不生效 #

原因 #

未给.container设置position: relative时，absolute元素#third相对于body定位，脱离容器文档流，干扰了sticky元素的粘滞逻辑；同时缺少层级控制，sticky元素可能被其他固定/绝对定位元素覆盖，导致看起来未生效。

修复方案 #

给.container添加position: relative，让内部定位元素统一以容器为参照；给sticky元素添加z-index提升层级，避免被覆盖。

修改后的关键样式：

.container {
  /* 原有样式不变 */
  position: relative; /* 新增 */
}

#first {
  position: sticky;
  top: 10px;
  z-index: 10; /* 新增，防止被其他元素遮挡 */
}

问题2：position: absolute元素超出.container范围 #

原因 #

position: absolute的元素会优先参照最近的非static定位祖先，当前.container默认是static定位，所以#third会相对于body定位，width: 100%匹配的是body宽度，自然超出仅占80%宽度的容器。

修复方案 #

给.container添加position: relative，让#third以容器为定位参照，此时width: 100%就会匹配容器宽度，不会超出。

完整修复后的代码 #

CSS #

* {
  margin: 0;
  padding: 0;
}

p {
  text-align: justify;
}

.container {
  margin: 15px auto;
  border: 2px solid #FF0000;
  background-color: #69D818;
  width: 80%;
  height: 6000px;
  position: relative; /* 新增 */
}

h1 {
  background-color: #0013FF;
}

#first {
  position: sticky;
  top: 10px;
  z-index: 10; /* 新增 */
}

#second {
  position: fixed;
  top: 200px;
}

#third {
  position: absolute;
  width: 100%;
  top: 250px;
}

#fourth {
  position: relative;
  top: 50px;
}

HTML #

<div class="container">
  <h1 id="first">Position Sticky</h1>
  <h1 id="second">Position Fixed</h1>
  <h1 id="third">Position Absolute</h1>
  <h1 id="fourth">Position Relative</h1>
</div>

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