对话框开启overflow-y:auto后绝对定位元素溢出被截断的解决方法

方案一：使用overflow-clip-margin（纯CSS，现代浏览器支持） #

这个属性能给设置了overflow的容器添加裁剪边距，允许子元素溢出容器指定范围，同时保留容器的滚动功能。

修改.dialog的CSS：

.dialog {
  background: #ccc;
  max-width: 400px;
  max-height: 200px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-clip-margin: 100px; /* 留出足够边距让selector溢出 */
}

黑色selector就能正常溢出到Dialog外部，Dialog的滚动功能不受影响。注意：该属性支持Chrome 90+、Firefox 81+、Edge 90+，旧浏览器可能不兼容。

方案二：调整定位上下文+JS同步位置（兼容性更好） #

核心思路是把绝对定位的selector的参考容器提升到Dialog的外层容器（.dialog_container），避免被Dialog的overflow裁剪，同时通过JS监听Dialog滚动事件，同步selector的位置，让它始终对齐内部的.selector_container。

修改后的CSS #

.dialog_container {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
}

.dialog {
  background: #ccc;
  max-width: 400px;
  max-height: 200px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

p {
  font-size: 1.75rem;
}

.selector_container {
  /* 移除relative，不再作为定位参考 */
  position: static;
}

.selector {
  position: absolute;
  width: 200px;
  background: #222;
  color: #fff;
  font-size: 3rem;
  /* 初始位置由JS控制 */
  top: 0;
  left: 0;
}

添加JavaScript #

const dialog = document.querySelector('.dialog');
const selectorContainer = document.querySelector('.selector_container');
const selector = document.querySelector('.selector');

// 同步selector位置的函数
function syncSelectorPosition() {
  const containerRect = selectorContainer.getBoundingClientRect();
  const dialogRect = dialog.getBoundingClientRect();
  
  // 计算selector相对于.dialog_container的位置
  selector.style.top = `${containerRect.top - dialogRect.top - 50}px`;
  selector.style.left = `${containerRect.left - dialogRect.left - 50}px`;
}

// 初始同步位置
syncSelectorPosition();

// 监听Dialog滚动事件，实时同步位置
dialog.addEventListener('scroll', syncSelectorPosition);

// 监听窗口resize事件，重新同步位置（可选）
window.addEventListener('resize', syncSelectorPosition);

修改后的HTML #

将.selector从.selector_container中移到.dialog_container内，与.dialog同级：

<div class="dialog_container">
  <div class="dialog">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <div class="selector_container"></div>
  </div>
  <div class="selector">Lorem ipsum dolor sit amet</div>
</div>

处理后，selector会始终对齐原位置，不会被Dialog滚动裁剪，同时Dialog的滚动功能完全正常，兼容性覆盖绝大多数新旧浏览器。

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