如何使重叠的fixed定位div中底部元素实现overflow:scroll功能

架构老林

2026-6-15

解决思路与方案

你的问题核心是上层元素拦截了底层滚动元素的鼠标事件，导致设置了overflow-y: scroll的元素无法响应滚动操作。同时你需要保持两个元素的重叠效果，以下是两种可行方案：

方案一：阻止上层元素拦截鼠标事件

直接给上层的.framething添加pointer-events: none，让它不接收任何鼠标交互，底层的滚动元素就能正常响应滚动：

.bottomscrollelement,
.framething {
  top: 0;
  left: 0;
  transform: rotate(-5deg);
}

.framething {
  z-index: 10;
  position: fixed;
  pointer-events: none; /* 新增：让上层元素不拦截鼠标事件 */
}
.bottomscrollelement{
  height: 400px;
  width: 550px;
  margin-top: 120px;
  margin-left: 107px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: fixed;
}

方案二：使用父容器统一控制定位

通过一个父容器包裹两个元素，统一设置旋转和定位规则，让子元素的重叠关系更清晰，同时避免margin偏移带来的定位混乱：

修改后的HTML

<div class="frame-container">
  <div class="bottomscrollelement">
    <p> list </p>
    <p>item1</p>
    <p>item2</p>
    <p>item3</p>
    <p>item4</p>
    <p>item5</p>
    <p>item6</p>
    <p>item7</p>
    <p>item8</p>
    <p>item9</p>
    <p>item10</p> <!-- 增加内容确保超过容器高度，触发滚动 -->
  </div>
  <div class="framething">
    <img src="thisistheframe.png" width="800px"/>
  </div>
</div>

修改后的CSS

.frame-container {
  position: fixed;
  top: 0;
  left: 0;
  transform: rotate(-5deg); /* 统一设置旋转效果 */
}

.framething {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
}

.bottomscrollelement{
  height: 400px;
  width: 550px;
  top: 120px;
  left: 107px; /* 用top/left替代margin，定位更精准 */
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
}