如何实现子div超出overflow:auto的父div且随父容器滚动？

针对你遇到的问题，这里有几个实用的解决思路：

1. 拆分滚动容器与定位上下文 #

把原来的滚动父元素套进一个外层容器，让外层容器承担定位上下文的角色，滚动父元素只负责处理滚动逻辑。这样子元素相对于外层容器定位，既能超出滚动父元素的边框，又能跟着父容器一起滚动。

示例代码：

<div class="outer-wrap">
  <div class="scroll-box">
    <div class="long-content">这里是很长的滚动内容...</div>
    <div class="overflow-element">我能超出滚动容器的边框</div>
  </div>
</div>

.outer-wrap {
  position: relative; /* 作为子元素的定位基准 */
  width: 300px;
  height: 300px;
}
.scroll-box {
  width: 100%;
  height: 100%;
  overflow: auto; /* 仅负责滚动 */
  /* 不要设置position:relative，避免成为定位上下文 */
}
.overflow-element {
  position: absolute;
  top: 60px;
  left: 310px; /* 超出滚动容器宽度 */
  width: 160px;
  height: 110px;
  background: #ff6347;
}
.long-content {
  height: 900px; /* 让滚动容器出现滚动条 */
  background: #f5f5f5;
}

2. 用CSS Transform实现视觉溢出 #

利用transform属性移动子元素，因为transform创建的视觉偏移不会被父容器的overflow:auto识别为需要滚动的内容，所以子元素能超出边框，同时父容器的滚动行为不受影响，子元素也会跟着父容器滚动。

示例代码：

<div class="scroll-box">
  <div class="long-content">这里是很长的滚动内容...</div>
  <div class="overflow-element">我能超出滚动容器的边框</div>
</div>

.scroll-box {
  width: 300px;
  height: 300px;
  overflow: auto;
  position: relative;
}
.overflow-element {
  position: relative;
  transform: translateX(310px); /* 把元素移到容器外 */
  width: 160px;
  height: 110px;
  background: #ff6347;
}
.long-content {
  height: 900px;
  background: #f5f5f5;
}

这个方法的好处是子元素不用脱离文档流，点击交互区域也会跟着视觉位置走，兼容性也很好。

3. 用Clip-Path替代Overflow控制可见范围 #

如果父容器需要滚动，同时允许特定子元素超出，可以用clip-path裁剪父容器的可见区域，代替overflow:auto的裁剪逻辑。子元素可以通过设置clip-path: none来不受父容器的裁剪限制，实现超出效果。

示例代码：

<div class="scroll-box">
  <div class="long-content">这里是很长的滚动内容...</div>
  <div class="overflow-element">我能超出滚动容器的边框</div>
</div>

.scroll-box {
  width: 300px;
  height: 300px;
  overflow: auto;
  position: relative;
  clip-path: inset(0 0 0 0); /* 裁剪出容器的可见区域 */
}
.overflow-element {
  position: absolute;
  top: 60px;
  left: 310px;
  width: 160px;
  height: 110px;
  background: #ff6347;
  clip-path: none; /* 取消子元素的裁剪 */
}
.long-content {
  height: 900px;
  background: #f5f5f5;
}

注意：这个方法需要注意浏览器兼容性，现代主流浏览器都支持，但IE浏览器不兼容clip-path。

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