html如何追加兄弟元素,html – 静态定位元素影响后续兄弟元素的绝对位置

我知道任何具有position：absolute的元素都将相对于最近的祖先定位,其位置属性如绝对或相对.这在例如

here的各种答案中都有提到.另外在w3schools网站上

here …

An element with position: absolute; is positioned relative to the

nearest positioned ancestor (instead of positioned relative to the

viewport,like fixed).

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

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

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;

}

This div element has position: relative;

This div element has position: static

This div element has position: absolute,but is positioned relative to the preceding static element,not the first positional ancestor.;

This div element also has position: absolute;