了解具有“固定”和“绝对”位置的不同嵌套元素的行为方式

Question

很简单的代码，但是我还没有找到明确的答案

据我所知，所有绝对定位的 HTML 元素都根据最近的非静态/定位祖先获得它们的位置（因此任何固定或相对祖先都会影响绝对定位元素的位置）。正确如果我错了，请

具有“固定”位置的元素始终根据视口获取其位置。 话虽如此，我给你这个代码：

    * {
      margin: 0;
      padding: 0;
    }

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

    div > div {
      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>
      
      <div id="children">
      </div>
    </div>

结果：

为什么手动设置#children 元素位置为"top: 0px" 并没有相对于#parent 元素向下移动1px？由于绝对定位元素根据固定元素获得它们的位置？