静态定位元素影响后续同级元素的绝对位置

我知道任何元素位置：绝对将相对于具有位置属性的最近祖先进行定位，例如absolute or relative。例如，在各种答案中都提到了这一点here https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent?rq=1。也在 w3schools 网站上here https://www.w3schools.com/css/css_positioning.asp...

位置为绝对的元素；是相对于 最近定位的祖先（而不是相对于 视口，就像固定的一样）。

然而，插入静态元素似乎会破坏此规则并移动绝对元素。我想了解为什么会发生这种情况。请参阅下面的代码片段。

如果将静态元素更改为绝对元素，则后续元素将按预期显示（根据最近定位祖先规则）。

div.relative {
    position: relative;
    width: 440px;
    height: 600px;
    border: 3px solid #73AD21;
} 
div.static {
position: static;
    width: 200px;
    height: 100px;
    border: 3px solid #73ADff;
}
div.absolute {
    position: absolute;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
div.absolute2 {
  left:210px;
    position: absolute;
    width: 200px;
    height: 100px;
    border: 3px solid #ffAD21;
}

<div class="relative">This div element has position: relative;
   <div class="static">This div element has position: static</div>
  <div class="absolute">This div element has position: absolute, but is positioned relative to the preceding static element, not the first positional ancestor.;</div>
    <div class="absolute2">This div element also has position: absolute;</div>

</div>

As this https://stackoverflow.com/a/23133818/2894798 answer explains, if there is no (top, left, right, bottom) attributes the position: absolute element will be positioned by default as if it was part of the normal flow , this is helpful in case you want to maintain a position: absolute next to its sibling like a tool tip would, and manipulate it with margin property, let say:

margin-top:-40px;
margin-left:30px;

但如果您设置任何（上、左、右、下），这将重置默认位置并且将相对于父级。

top:0