如何让子元素溢出overflow:hidden的祖先div且相对于直接父级定位

当外层元素（#parent）设置overflow属性后，会裁剪所有超出自身边界的子元素——哪怕子元素是绝对定位的，只要它的包含块（这里是#anchor）属于外层元素的子树，就会被强制裁剪。要让绝对定位的子元素溢出外层元素，同时保持相对于直接父级（#anchor）的定位，需要调整结构或定位方式。

方案1：调整DOM结构，将子元素移到外层容器外 #

把绝对定位的#child从#anchor中移出，放到#parent的外层容器中，同时将#parent的overflow属性保留，利用外层容器的相对定位+CSS计算值让#child对齐#anchor，既保留滚动功能，又不会裁剪外部的#child。

修改后的代码 #

<div id="wrapper">
  <div id="parent">
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div id="anchor"></div>
  </div>
  <div id="child"></div>
</div>
<p>Green rectangle should overflow</p>

#wrapper {
  position: relative; /* 作为#child的包含块 */
  display: inline-block; /* 贴合#parent的宽度 */
}

#parent{
  width: 80px;
  height: 50px;
  overflow-y: scroll;
  outline: auto;
  display: flex;
  gap: 3px;
}

.spacer{
  width: 20px;
  height: 20px;
  background-color:blue;
}

#anchor {
  width: 20px; /* 保持原flex项的宽度 */
}

#child{
  width: 20px;
  height: 200px;
  position: absolute;
  top: 0;
  left: calc(20px + 20px + 3px + 3px); /* 计算#anchor的位置：两个spacer宽度 + 两个gap */
  background-color: green;
}

方案2：使用JavaScript动态定位 #

如果不想调整DOM结构，可以通过JS获取#anchor的实时位置，将#child设置为fixed定位（脱离#parent的裁剪范围），动态调整偏移量保持与#anchor对齐。

修改后的代码 #

<div id="parent">
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div id="anchor">
    <div id="child"></div>
  </div>
</div>
<p>Green rectangle should overflow</p>

#parent{
  width: 80px;
  height: 50px;
  overflow-y: scroll;
  outline: auto;
  display: flex;
  gap: 3px;
}

.spacer{
  width: 20px;
  height: 20px;
  background-color:blue;
}

#anchor {
  /* 移除position:relative，避免成为#child的包含块 */
}

#child{
  width: 20px;
  height: 200px;
  position: fixed; /* 相对于视口，不会被#parent裁剪 */
  background-color: green;
}

function positionChild() {
  const anchor = document.getElementById('anchor');
  const child = document.getElementById('child');
  const rect = anchor.getBoundingClientRect();
  child.style.left = `${rect.left}px`;
  child.style.top = `${rect.top}px`;
}

// 初始化定位
positionChild();
// 监听窗口滚动或大小变化，重新定位
window.addEventListener('scroll', positionChild);
window.addEventListener('resize', positionChild);

• 方案1通过将#child移出#parent的子树，避免被#parent的overflow裁剪，同时利用外层容器的relative定位+calc计算值，实现#child与#anchor的对齐。
• 方案2通过JS获取#anchor的视口位置，将#child设置为fixed定位（脱离#parent的裁剪范围），动态调整位置保持与#anchor的相对关系。

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