为何嵌套Fixed子元素的定位未按预期以视口为基准？

我想用Vue开发可递归展开的侧边Tab组件，逻辑上没问题，但实际运行时每个展开的Tab尺寸会逐渐缩小。排查后发现，嵌套的fixed定位子元素没以视口为原点(0,0)，反而把父级的fixed元素当成了定位基准。

一开始怀疑是Vue虚拟化的问题，把代码排查了个遍还是没解决。以下是复现问题的示例代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="">
      <!-- 父级Tab组件 -->
      <div class="fixed top-0 right-0 left-0 bottom-0" id="component1">
        <p>Component1 start</p>
        <div class="fixed z-20 top-0 right-0 left-0 bottom-0" style="background-color: rgba(0, 0, 0, 0.25);"></div>
        <div class="fixed z-20 top-0 right-0 h-full w-1/4">
          <div class="h-full w-full flex flex-col transform transition-transform bg-yellow-500">

            <!-- 子级Tab组件 -->
            <div class="fixed top-0 right-0 left-0 bottom-0" id="component2">
              <p>Component2 start</p>
              <div class="fixed z-20 top-0 right-0 left-0 bottom-0" style="background-color: rgba(0, 0, 0, 0.25);"></div>
              <div class="fixed z-20 top-0 right-0 h-full w-1/4">
                <div class="h-full w-full flex flex-col transform transition-transform bg-orange-500">

                  <div class="">
                  </div>

                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我原本期望橙色Tab完全覆盖黄色Tab，但现在黄色Tab因为橙色Tab左侧的遮罩层是以component1的Tab主体为基准（而非视口），导致颜色变成赭色。我不想用临时修复（比如给Tab设固定尺寸避开透明度问题），想知道这个方案失效的根本原因。

根本原因分析 #

这是CSS position: fixed 的特殊定位规则导致的：

• 正常情况下，fixed元素是相对于浏览器视口定位的，但如果它的任意父级元素设置了transform、perspective或filter属性（且属性值不为none），这个fixed元素的定位基准会切换为该父级元素。
• 你的代码中，黄色Tab的容器带有transform transition-transform类，其中transform属性触发了上述规则——子级的component2（橙色Tab的外层fixed容器）不再以视口为基准，而是以component1的黄色Tab容器为定位原点。
• 因此component2的遮罩层（fixed top-0 right-0 left-0 bottom-0）只能覆盖component1的黄色Tab区域，而非整个视口；同时橙色Tab的w-1/4是相对于黄色Tab的宽度计算，尺寸自然逐层缩小，最终出现叠加后颜色异常的问题。

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