容器保留overflow:hidden时，内部Tooltip溢出显示问题求助

要在保留容器overflow:hidden且Tooltip DOM在容器内部的前提下，让Tooltip突破容器裁剪显示在最上层，有两种可行方案：

方案一：自定义属性+JS辅助定位（稳定可靠） #

利用fixed定位脱离父元素的裁剪范围，同时通过自定义属性同步容器的位置，让Tooltip视觉上和容器保持关联：

修改后的代码 #

div {
  outline: 1px solid black;
}

.container {
  position: relative;
  height: 50px;
  width: 500px;
  overflow: hidden;
  background-color: pink;
  display: grid;
  align-items: center;
}

.tooltip {
  z-index: 9999;
  position: fixed;
  top: var(--container-top);
  left: var(--container-left);
  background-color: lightcoral;
  height: 200px;
}

<div class="container">
  <div class="tooltip">fancy Tooltip content</div>
</div>

const container = document.querySelector('.container');
// 同步容器位置到自定义属性
function syncTooltipPos() {
  const rect = container.getBoundingClientRect();
  container.style.setProperty('--container-top', `${rect.top}px`);
  container.style.setProperty('--container-left', `${rect.left}px`);
}

// 初始化定位
syncTooltipPos();
// 窗口大小变化时重新定位
window.addEventListener('resize', syncTooltipPos);

方案二：层叠上下文技巧（仅适配简单场景） #

如果Tooltip不需要随页面滚动，可以通过创建独立层叠上下文脱离父元素裁剪：

.container {
  position: relative;
  height: 50px;
  width: 500px;
  overflow: hidden;
  background-color: pink;
  display: grid;
  align-items: center;
  z-index: auto; /* 不创建层叠上下文 */
}

.tooltip {
  z-index: 9999;
  top: 0;
  background-color: lightcoral;
  position: absolute;
  height: 200px;
  transform: translateZ(0); /* 创建独立层叠上下文 */
}

注意：该方法在复杂布局或部分浏览器环境下可能失效，优先推荐方案一。

内容的提问来源于stack exchange，提问作者Fabio Ribeiro de Carvalho