使用transform: matrix时Tooltip无法覆盖下层元素的问题

我之前也碰到过一模一样的坑！核心原因是transform属性会创建新的CSS堆叠上下文，导致Tooltip作为该元素的子节点时，层级被牢牢限制在这个上下文内部——哪怕你给Tooltip设了z-index: 9999也没用，它永远只能在带transform的元素及其子元素的层级范围内，没法突破到外面覆盖其他元素。

具体解决方案 #

咱们分两种场景处理，最稳妥的是调整DOM结构，让Tooltip脱离transform元素的堆叠上下文：

1. 重构DOM结构，将Tooltip移出transform元素

原来的结构可能是这样的（Tooltip是带transform的单词元素的子节点）：

<span class="rotated-word" style="transform: matrix(1, 0, 0.2, 1, 0, 0);">
  Benzene
  <div class="tooltip">
    <img src="benzene-structure.png" alt="Benzene structure">
  </div>
</span>

把它改成让Tooltip和带transform的元素同级，用一个父容器做相对定位：

<div class="word-wrapper">
  <span class="rotated-word" style="transform: matrix(1, 0, 0.2, 1, 0, 0);">
    Benzene
  </span>
  <div class="tooltip">
    <img src="benzene-structure.png" alt="Benzene structure">
  </div>
</div>

然后调整CSS，确保Tooltip相对于父容器定位，并且层级足够高：

.word-wrapper {
  position: relative;
  display: inline-block; /* 保持行内布局，不破坏原有文本流 */
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999; /* 只要比页面其他元素的z-index高即可 */
  display: none;
  padding: 8px;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.word-wrapper:hover .tooltip {
  display: block;
}

2. 无法修改DOM结构的替代方案

如果因为某些限制不能调整DOM，你可以试试给带transform元素的父容器设置足够高的z-index，同时确保父容器没有创建自己的堆叠上下文（比如不要加transform、opacity<1、filter等属性）。不过这个方案局限性较大，如果父容器本身就在某个堆叠上下文里，还是会失效，所以优先推荐第一种方法。

问题根源解析 #

CSS的堆叠上下文就像一个个独立的“层级容器”：当元素应用了非none的transform、opacity<1、filter等属性时，浏览器会为它创建一个新的堆叠上下文。这个容器里的所有元素，不管z-index设得有多高，都只能在容器内部排序，没法跑到容器外面覆盖其他元素——你的Tooltip刚好在这个容器里，自然盖不住外面的下层元素。

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