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