为何absolute定位的div无法相对于fixed定位的div定位？

问题原因 #

• absolute定位的元素，只会以最近的、position值不为static的祖先元素作为定位参照，而非同级元素。你当前的红色div和蓝色div是兄弟关系，没有嵌套结构，所以蓝色div不会以红色div为参照，而是会相对于页面根元素（body/html）定位。

解决方法 #

把蓝色div嵌套到红色div内部，红色div作为它的父元素（且position为fixed，属于非static定位），蓝色的absolute定位就会自动以红色div为参照。

修改后的代码 #

CSS（无需改动）

.mench {
  display: inline-block;
  height: 50px;
  width: 50px;
}

HTML

<div class="mench" style="position: fixed;top: 25px; left: 100px; background-color: red;">
  <div class="mench" style="position: absolute; left: 25px; background-color: blue;"></div>
</div>

补充场景（无需嵌套的方案） #

如果需要保持两个div的兄弟结构，可以给红色div套一个父容器，给父容器设置非static定位（比如position: fixed或position: relative），再把蓝色div放在这个父容器里：

<div style="position: fixed;top: 25px; left: 100px;">
  <div class="mench" style="background-color: red;"></div>
  <div class="mench" style="position: absolute; left: 25px; top: 0; background-color: blue;"></div>
</div>

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