Tooltip z-index被后续元素标题遮挡问题求助

问题根源 #

你遇到的遮挡问题核心是堆叠上下文导致的：

• 每个.rotated-header设置了position: relative，会创建独立的堆叠上下文。
• DOM中后续的.rotated-header元素默认堆叠在前面的元素之上，即便给内部.tooltip-text设了z-index:10，这个值只在当前容器的堆叠上下文内生效，没法突破层级覆盖后面的表头标题。

修复现有代码 #

只需要给hover状态的.rotated-header加全局层级的z-index，让整个表头容器在hover时提升堆叠顺序，就能让内部tooltip盖住其他元素：

/* 新增：hover时提升整个容器的堆叠层级 */
.rotated-header:hover {
  z-index: 100;
}

/* 原有CSS保留，可微调tooltip位置优化体验 */
.header {
  vertical-align: bottom;
}

.rotated-header .tooltip-text {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 10;
  opacity: 0;
  transform: rotate(45deg);
  transform-origin: left;
  width:25em;
  white-space: normal;
  /* 调整tooltip位置，避免被旋转容器偏移 */
  left: 100%;
  bottom: 0;
  margin-left: 10px;
  transition: opacity 0.2s; /* 加过渡动画更流畅 */
}

.rotated-header .tooltip-text::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px;
  border-color: transparent #555 transparent transparent;
  z-index: 11;
  /* 调整箭头位置对齐 */
  right: 100%;
  bottom: 20px;
}

.rotated-header:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.schedule-header-tooltip {
  white-space: nowrap;
  pointer-events: auto;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.rotated-header {
  width:30px;
  height:100px;
  position:relative;
  transform: 
    translate(1em, -1em)
    rotate(315deg);
  transform-origin:bottom;
  pointer-events: none;
}

.tableFixHead {
  overflow: auto;
  height: 150px;
}

.tableFixHead thead tr { 
  position: sticky;
  top: -2em;
  background: white;
}

HTML部分保持原样即可，hover时整个表头容器层级提升，内部tooltip自然会覆盖后面的表头标题。

更合适的Tooltip实现方式 #

如果想从根源避免这类堆叠问题，还有几种更稳妥的方案：

1. 原生title属性+CSS自定义（极简方案） #

不需要额外DOM结构，直接给表头加title，用CSS伪元素实现自定义样式：

.rotated-header[title] {
  position: relative;
}

.rotated-header[title]:hover::after {
  content: attr(title);
  position: absolute;
  background: #555;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 100;
  left: 100%;
  bottom: 0;
  margin-left: 10px;
  white-space: normal;
  width: 25em;
}

HTML简化为：

<th class="header">
  <div class="rotated-header" title="Name: Something extremely long and unwieldy&#10;Date&#10;Age">
    <div class="schedule-header-tooltip">
      <span>Rotated row 1</span>
    </div>
  </div>
</th>

优点：DOM结构更简洁，完全避免嵌套堆叠上下文的干扰。

2. 全局容器挂载Tooltip #

把所有tooltip的DOM放在<body>下，通过JS控制显示位置：

• 给每个表头绑定mouseenter事件，计算位置后显示全局tooltip并填充内容。
• mouseleave时隐藏tooltip。
  这种方式适合复杂场景，所有tooltip处于同一个堆叠上下文，只需设置一次z-index就能避免层级问题。

内容的提问来源于stack exchange，提问作者Kevin Yao