当右侧列设置为 overflow-y: scroll 且 position: relative 时，其内部绝对定位的 tooltip 会被裁剪；移除该列的 overflow-y: scroll（或改用其他滚动方案）可恢复 tooltip 的正常溢出行为。
当右侧列设置为 `overflow-y: scroll` 且 `position: relative` 时，其内部绝对定位的 tooltip 会被裁剪；移除该列的 `overflow-y: scroll`（或改用其他滚动方案）可恢复 tooltip 的正常溢出行为。
在构建双栏布局（如侧边导航 + 主内容区）时，常需为右侧内容区启用独立纵向滚动，并在其内放置悬停显示的 tooltip。但若直接对 .right 容器同时应用 position: relative 和 overflow-y: scroll，会意外触发 “包含块裁剪”（clipping by containing block）：即使 tooltip 使用 position: absolute 并设置了 z-index: 3，其超出 .right 边界的区域仍会被隐藏——这是因为 CSS 规范规定：当一个元素设置了 overflow ≠ visible（如 scroll、auto），它将成为其子代绝对定位元素的“裁剪上下文”（clipping context），无论其 position 值如何。
你当前的 CSS 中：
div.right {
position: relative;
overflow-y: scroll; /* ⚠️ 关键问题：触发裁剪 */
/* ... 其他样式 */
}
正是这行 overflow-y: scroll 导致 .tooltip 被强制限制在 .right 的边界内，即使 right: 100% 试图向左溢出，也无法突破该容器的裁剪框。
✅ 正确解法是：将滚动行为从 .right 容器本身剥离，转而作用于其内部内容层。例如，保持 .right 为 position: relative 且 overflow: visible（默认），再嵌套一个专门负责滚动的子容器：
/* 修改后的结构建议（CSS） */
div.right {
position: relative;
display: flex;
flex-direction: column;
height: 92vh;
z-index: 1;
/* 移除 overflow-y: scroll 和 overflow-x: visible */
}
/* 新增滚动层 */
div.right > div {
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
flex: 1; /* 确保占满高度 */
}
/* 确保 tooltip 不受父级裁剪影响 */
#header {
position: relative;
overflow: visible; /* 显式声明，增强可读性 */
}
同时，在 JSX 中微调结构（确保滚动层包裹内容但不包裹 tooltip 触发点）：
<div classname="right">
<div classname="scrollable-content"> {/* ← 此 div 负责滚动 */}
<div id="header">
<p classname="label">
label
</p>
<div classname="tooltip"> {/* tooltip 与滚动层同级，位于 .right 内 */}
<p>tooltip</p>
</div>
</div>
{/* 其他可滚动内容 */}
</div>
</div>
⚠️ 注意事项：
- 不要依赖
z-index强行“穿透”裁剪边界——z-index控制堆叠顺序，但无法绕过overflow引起的视觉裁剪； - 若必须保留
.right的overflow-y: scroll（如因历史架构限制），可考虑将 tooltip 渲染到下（使用 React Portal），并用 JS 动态计算位置，但这会增加复杂度；- 测试时请清除浏览器缓存并检查 DevTools 中
.right元素是否仍有overflow样式继承或覆盖。总结：
overflow属性不仅控制滚动条，更定义了视觉裁剪边界；绝对定位元素的溢出能力，取决于其最近的、overflow ≠ visible的定位祖先——而非z-index或position本身。 解耦“定位上下文”与“滚动容器”，是解决此类溢出问题的核心思路。 - 测试时请清除浏览器缓存并检查 DevTools 中
