为何无定位祖先时position:absolute不固定在视口底部？

我在试验CSS定位时遇到了一个困惑点，代码设置如下：

CSS代码 #

.box3 {
  background-color: #9C27B0;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

HTML代码 #

<div class="box3"></div>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>
<p>lorem*50</p>

页面中没有定位祖先元素（即没有父元素设置position: relative、absolute或fixed），因此.box3应该相对于初始包含块（initial containing block）定位，我理解此时初始包含块为视口（viewport）。基于此，我预期.box3会固定在屏幕底部，即使页面滚动时也保持不动，但实际它却像普通内容一样随页面滚动。我的问题是：既然.box3相对于视口定位，为何滚动时它不会固定在视口底部？我知道position: fixed可以将元素固定在屏幕上，但我想理解为何即使参考对象是视口，position:absolute仍会随页面滚动。

解答 #

核心问题在于你对初始包含块的理解有误：

• 初始包含块并不是视口，而是根元素（<html>）的包含块，它的初始尺寸和视口一致，但它属于文档流的一部分，会随着页面的滚动而整体移动。
• 当position:absolute的元素没有任何定位祖先时，它会相对于这个初始包含块定位，所以页面滚动时，初始包含块跟着文档走，absolute元素自然也会跟着滚动。

而position:fixed的元素是直接相对于**视口（浏览器窗口的可见区域）**定位的，视口是独立于文档流的固定区域，不会随页面滚动移动，所以fixed元素能固定在屏幕上。

简单区分：

• position:absolute（无定位祖先）：绑定的是文档的初始包含块，随文档滚动
• position:fixed：绑定的是浏览器视口，不随文档滚动

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