我知道任何具有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 …