静态定位元素影响后续兄弟元素的绝对位置

Question

我知道任何具有position:absolute的元素都将相对于最近的祖先定位,其位置属性如绝对或相对.这在例如此处的各种答案中提到.也在这里的w3schools网站上......

位置为绝对的元素; 相对于最近定位的祖先定位(而不是相对于视口定位,如固定).

但是,插入静态元素似乎会破坏此规则并移动绝对元素.我想知道为什么会这样.请参阅下面的代码段.

如果静态元素被追加到绝对值,则后续元素将按预期显示(根据最近的位置祖先规则).

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>

Answer 1

正如这个答案所解释的，如果没有（上、左、右、下）属性，则默认情况下，绝对元素将被定位，就好像它是正常流的一部分一样，如果您想像工具提示一样在其同级旁边保留一个position:absolute，并使用margin属性操作它，那么这会很有帮助，比方说：

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

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

top:0