为何overflow:hidden在含定位属性的同级元素上不生效？

一、各现象的原因解析 #

1. 给 .child1 设置 overflow:hidden 无效果 #

overflow:hidden 的作用是裁剪当前元素内部子元素超出自身边界的部分，而非裁剪元素自身超出父元素的部分。.child1 是绝对定位元素，它自身没有子元素溢出，超出 #parent 的部分属于元素自身对父容器的溢出，因此给它加 overflow:hidden 完全起不到裁剪作用。

2. 给 #parent 设置 overflow:hidden 后，#section2 不再被遮挡，但 .child2 仍被 .child1 覆盖 #

• 对 #section2 生效的原因：#parent 是相对定位元素，设置 overflow:hidden 后，会裁剪所有超出自身宽高边界的内容（包括 .child1 超出的部分），原本 .child1 覆盖 #section2 的溢出部分被切掉，#section2 自然不再被遮挡。
• .child2 仍被覆盖的原因：.child1 是绝对定位元素，绝对定位元素的堆叠层级高于普通流元素（.child2 未设置定位，属于普通流）。overflow:hidden 仅负责裁剪溢出，不会改变内部子元素的堆叠顺序。

3. .child1 和 .child2 同级，无论怎么加 overflow:hidden，.child2 始终被覆盖 #

核心是堆叠上下文层级规则：绝对定位元素脱离普通文档流，默认堆叠优先级高于普通流元素。overflow:hidden 只处理溢出裁剪，不调整元素堆叠层级，因此无法改变两者的覆盖关系。

二、解决办法 #

解决 .child2 被 .child1 覆盖的问题 #

给 .child2 设置定位属性（比如 position:relative）并指定更高的 z-index 值，提升它的堆叠层级：

#parent {
  position: relative;
  background-color: grey;
  width: 600px;
  height: 600px;
  /* 如需裁剪.child1超出父容器的部分，保留该属性 */
  overflow: hidden;
}

.child1 {
  position: absolute;
  background-color: orange;
  width: 400px;
  height: 800px;
}

.child2 {
  background-color: green;
  width: 300px;
  height: 300px;
  /* 添加定位与z-index提升层级 */
  position: relative;
  z-index: 1;
}

#section2 {
  background-color: purple;
}

效果说明 #

修改后，.child2 会显示在 .child1 上方；若保留 #parent 的 overflow:hidden，.child1 超出父容器的部分依然会被裁剪，不会覆盖 #section2。

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