内容溢出差异化处理：Tooltip层级与滚动轴兼容问题

问题根源 #

1. 多余X轴滚动条：当设置overflow-y: scroll时，浏览器默认会将overflow-x设为auto，容器内文本宽度超出时就会触发X轴滚动。
2. Tooltip被遮挡：滚动容器的overflow属性会创建独立的堆叠上下文，内部元素的z-index仅在容器内生效，无法突破到页面顶层。

解决方案 #

1. 移除多余X轴滚动条

给滚动容器明确禁用X轴滚动，并确保长文本自动换行：

.demo {
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden; /* 强制关闭X轴滚动 */
}

.demo p {
  overflow-wrap: break-word; /* 长文本自动换行，避免宽度溢出 */
}

2. 让Tooltip突破堆叠上下文置顶

最稳妥的方式是将Tooltip挂载到<body>下，而非滚动容器内部，使其属于页面根堆叠上下文：

<!-- 滚动容器内仅保留触发按钮 -->
<div class="demo">
  <p>大段长文本内容...（此处省略N字）</p>
  <button class="tooltip-btn">悬停看Tooltip</button>
  <p>更多长文本内容...（此处省略N字）</p>
</div>

<!-- Tooltip直接放在body下 -->
<div class="tooltip" id="global-tooltip">这是需要置顶的Tooltip内容</div>

.tooltip {
  position: absolute;
  z-index: 9999; /* 足够高的层级，确保覆盖其他元素 */
  display: none;
  background: #2c3e50;
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

用JS控制Tooltip的显示位置：

const triggerBtn = document.querySelector('.tooltip-btn');
const tooltip = document.getElementById('global-tooltip');

triggerBtn.addEventListener('mouseenter', () => {
  const btnRect = triggerBtn.getBoundingClientRect();
  // 计算Tooltip位置，示例为按钮上方居中
  tooltip.style.top = `${btnRect.top - tooltip.offsetHeight - 10}px`;
  tooltip.style.left = `${btnRect.left + (btnRect.width - tooltip.offsetWidth) / 2}px`;
  tooltip.style.display = 'block';
});

triggerBtn.addEventListener('mouseleave', () => {
  tooltip.style.display = 'none';
});

3. 备选：Tooltip必须留在容器内的处理

如果受限于框架或业务逻辑无法移出Tooltip，可以通过调整定位方式突破堆叠上下文：

.demo {
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: static; /* 确保容器不创建堆叠上下文（默认值，若之前设了relative需改回） */
}

.tooltip {
  position: fixed; /* 相对视口定位，脱离容器的堆叠上下文 */
  z-index: 9999;
  display: none;
  /* 其他样式 */
}

这种情况下，Tooltip的位置计算需要基于视口坐标，而非容器内的相对位置。

内容的提问来源于stack exchange，提问作者dark-light