为何position:relative的div会显示在position:fixed的div之上？

DevOps 小满

2026-7-1

代码示例

CSS 代码

.green {
  width: 50px;
  height: 250px;
  background-color: green;
  position: fixed;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
}

HTML 代码

<div class="green">
</div>
<div>
  <div>
    <div class="red"></div>
  </div>
  <div>
    <div class="blue"></div>
  </div>
</div>

问题

理论上position:fixed的绿色矩形应处于所有元素最上层，红色（position:relative）和蓝色方块应在其下方，但实际红色方块却显示在绿色矩形上方，这是什么原因？
当将蓝色方块的opacity设置为非1的值（例如0.9）时，它也会显示在绿色矩形上方，这又是为什么？

原因解析

这两个现象的核心都是**CSS层叠上下文（Stacking Context）**的规则导致的，和元素的层叠顺序计算逻辑直接相关：

1. 红色方块覆盖绿色的原因

绿色元素设置position:fixed会创建独立的层叠上下文，但它是根层叠上下文（<html>）的直接子元素。
红色元素的外层容器（绿色的同级<div>）在HTML结构中后于绿色元素出现。在同一层叠上下文（根上下文）中，同级元素的层叠顺序由出现顺序决定：后出现的元素会覆盖先出现的元素。
红色元素虽然只是position:relative，但它属于这个后出现的容器内部，因此整个容器的渲染层级高于绿色元素，红色自然显示在绿色上方。