关于fixed与absolute嵌套元素定位行为的技术疑问

1. 核心问题：DOM结构搞错了 #

你写的HTML里，#parent和#children是平级的兄弟元素，不是父子嵌套关系：

<div>
  <div id="parent"></div>
  <div id="children"></div>
</div>

#children的父元素是最外层的蓝色div（默认position: static），#parent根本不是它的祖先，所以不管#parent用什么定位，都不会影响#children的位置。

2. 再明确下定位规则 #

你对absolute定位的基本理解是对的，但要补个关键点：

• absolute元素只会找自己DOM结构里的祖先元素（父、祖父这类嵌套的），而且这个祖先的position不能是static（relative/absolute/fixed/sticky都算），才会把它当定位基准。
• fixed元素确实是基于视口定位，但如果fixed元素是某个absolute元素的父/祖先，那这个absolute元素会以fixed元素为基准定位，而不是视口。

要实现预期效果的修正方法 #

如果想让#children相对于#parent定位，得把#children嵌套到#parent里面，调整后的代码如下：

* {
  margin: 0;
  padding: 0;
}

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

#parent {
  height: 30px;
  width: 30px;
  background-color: red;
  position: fixed;
  top: 5px;
}

#children {
  height: 20px;
  width: 20px;
  background-color: green;
  position: absolute;
  top: 0px;
}

<div>
  <div id="parent">
    <div id="children"></div>
  </div>
</div>

这样绿色方块就会紧贴红色方块的顶部，符合你原本的预期。

解释你当前代码的运行结果 #

现在的代码里，#children的所有祖先都是static定位，所以它会以视口为基准定位，top:0就是贴在视口顶部。而最外层的蓝色div也是从视口顶部开始排的，所以视觉上绿色方块在蓝色div的左上角，和红色的#parent完全没关系。

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