为何#bottomBox未相对于父容器#container定位？

绝对定位（position: absolute）的元素遵循这样的规则：它会相对于最近的、position值不为static的祖先元素定位。如果所有祖先元素的position都是默认的static，它就会相对于根元素（<html>）定位。

你的#container没有设置position属性，默认值是static，所以#bottomBox无法以它为定位参考，只能跑到整个页面的底部。

给#container添加position: relative属性即可——这个属性不会改变容器本身的布局位置，只是让它成为内部绝对定位元素的定位容器：

修改后的#container样式代码：

#container {
    margin: auto;
    margin-top: 10px;
    width: 90%;
    aspect-ratio: 2 / 1;
    background-color: green;
    display: flex;
    position: relative; /* 新增此行 */
}

顺带一提，你的#topBox其实也存在同样的定位问题，添加这行代码后，它也会正确相对于#container定位，位置会更准确。

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