固定定位（fixed）面板的绝对定位切换按钮被裁剪问题求助

API 探路者

2026-7-22

固定定位面板的溢出切换按钮被裁剪问题解决方法

问题原因

你给添加了pinned类的.panel-inner设置了overflow-x: hidden，而这个元素是**固定定位（position: fixed）**的——固定定位元素会脱离文档流，它的overflow规则不受父元素overflow: visible的影响，自身的overflow-x: hidden会直接裁剪所有超出自身水平边界的内容，这就是那个向左偏移的切换按钮被裁剪的核心原因。

解决方案

提供两种可行的解决思路：

方案1：移除水平溢出隐藏规则

直接删掉.pinned中的overflow-x: hidden，让超出面板水平范围的内容可以正常显示：

.pinned {
  position: fixed;
  overflow-y: auto;
  /* 移除 overflow-x: hidden */
  height: calc(100vh - 75px);
  background-color: #fff3f3;
}

如果担心面板内部出现水平滚动条，可以改用overflow-x: clip（该属性会裁剪溢出内容但不显示滚动条，兼容性需注意）。

方案2：调整内边距与按钮位置

保留overflow-x: hidden，通过给面板添加左内边距，同时调整切换按钮的位置，让它刚好贴合面板左边缘且不触发裁剪：

.pinned {
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 75px);
  background-color: #fff3f3;
  padding-left: 10px; /* 新增左内边距，容纳按钮的偏移量 */
}

.toggle-section {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0; /* 将偏移量从-10px改为0 */
  transform: translateY(calc(50% + 5px));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}