如何让Dropdown突破滚动容器边界且父元素非absolute（无需JS）

没问题，我刚好碰到过类似的场景，纯CSS就能搞定这个需求——核心思路是避开滚动容器的裁剪规则，同时不破坏原有滚动结构。

需求回顾 #

你需要让"Dropdown"内容突破滚动容器的边界显示，但不能给滚动容器的父元素设置position: absolute（因为这会打乱内部滚动的布局）。

解决方案思路 #

• 移出滚动容器：把下拉元素从滚动容器的子节点中抽出来，这样就不会被滚动容器的overflow-y: scroll属性裁剪；
• 设置定位上下文：给滚动容器的直接父元素（也就是#w）加上position: relative，让它成为下拉元素的定位基准；
• 精准对齐位置：用绝对定位把下拉元素和滚动容器内的触发元素对齐。

调整后的完整代码 #

CSS 代码

#w {
  position: relative; /* 作为下拉框的定位上下文 */
  height: 150px;
  width: 150px;
  display: inline-block;
  background-color: lightgray;
}

#c {
  overflow-y: scroll;
  height: 150px;
  width: 150px;
  background-color: lightgray;
}

#abs-p {
  position: relative;
  display: inline-block;
  background-color: red;
  cursor: pointer; /* 给触发器加个鼠标提示，更符合交互逻辑 */
}

#abs-c {
  position: absolute;
  top: 40px; /* 根据触发器的位置调整，这里对应第一个HELLO之后的位置 */
  left: 0;
  text-align: right;
  width: 400px;
  background-color: red;
}

HTML 代码

<div id="w">
  <div id="c">
    <div>HELLO</div>
    <div id="abs-p">触发器</div> <!-- 这里是触发下拉显示的元素 -->
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>                                                      
  </div>
  <!-- 把下拉元素移到滚动容器外面，这样就不会被裁剪 -->
  <div id="abs-c">
    Dropdown
  </div>
</div>

额外补充 #

• 如果需要让下拉元素默认隐藏，点击触发器再显示，可以用CSS的:hover伪类：给#abs-c默认加display: none，然后写#abs-p:hover ~ #abs-c { display: block; }实现 hover 显示；
• 如果必须让下拉元素留在滚动容器的DOM结构里，也可以尝试用clip-path: inset(0 0 0 0)覆盖滚动容器的裁剪，但这种方法兼容性稍差，且需要精确计算位置，不是最优解。

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