如何实现子元素展开时不影响父元素的布局？

核心问题在于：当父元素设置position: relative时，子元素的position: absolute会以父元素为定位上下文，因此会被父元素的overflow: auto裁剪并触发滚动。要保留父元素的relative（满足嵌套定位需求）同时让子元素hover时脱离父元素的overflow限制，可采用以下两种方案：

方案一：新增外层定位容器（推荐，适配大多数场景） #

通过在父元素外添加一个额外的relative容器，让子元素hover时以外层容器为定位上下文，这样父元素的overflow就不会影响它，同时父元素的relative仍能服务内部其他嵌套定位元素。

修改后的代码：

<div class="outer-wrapper">
  <div class="parent-1">
    <div class="child"></div>
  </div>
</div>

.outer-wrapper {
  position: relative; /* 作为子元素hover时的定位上下文 */
  display: inline-block; /* 避免容器占满整行，适配父元素宽度 */
}

.parent-1 {
  position: relative; /* 保留该属性，供内部嵌套定位元素使用 */
  width: 200px;
  height: 200px;
  background-color: red;
  overflow: auto;
  box-sizing: border-box;
}

.child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  &:hover {
    position: absolute;
    height: 1000px;
    top: 0; /* 保持子元素hover前后的位置一致 */
    left: 0;
    z-index: 10; /* 确保子元素显示在父元素上方 */
  }
}

方案二：使用position: fixed（仅适用于子元素无需相对于父元素定位的场景） #

如果子元素hover后不需要保持相对于父元素的位置，可以直接将hover时的定位改为fixed，它以视口为定位上下文，完全脱离父元素的overflow限制：

.child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  &:hover {
    position: fixed;
    height: 1000px;
    /* 根据需求调整top/left值，确保位置符合预期 */
    top: 20px;
    left: 20px;
    z-index: 10;
  }
}

原理说明 #

• 当元素设置position: absolute时，会向上查找第一个position不为static的祖先作为定位上下文；
• 方案一通过外层容器承接子元素的定位上下文，让父元素的overflow只作用于自身内容，不影响hover后的子元素；
• 方案二利用fixed的视口定位特性，彻底脱离父元素的布局范围。

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