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

概述我知道任何具有position：absolute的元素都将相对于最近的祖先定位,其位置属性如绝对或相对.这在例如 here的各种答案中都有提到.另外在w3schools网站上 here … An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of 我知道任何具有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;}

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

解决方法 正如 this回答所解释的,如果没有(顶部,左侧,右侧,底部)属性,则位置：绝对元素将默认定位,就像它是正常流程

的一部分一样,这有助于您想要维护position：绝对旁边的兄弟就像一个工具提示,并用margin属性 *** 纵它,让我们说：

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

但如果您设置任何(顶部,底部),这将重置默认位置,并将相对于父级.

top:0

总结

以上是内存溢出为你收集整理的html – 静态定位元素影响后续兄弟元素的绝对位置全部内容，希望文章能够帮你解决html – 静态定位元素影响后续兄弟元素的绝对位置所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。