我一直在经历CSS Positions articles on Alistapart.下面的片段引起了我的注意,无法理解背后的理论.
在html / css下面显示两个框,一个在另一个上面.但是,如果我将#Box_1的位置更改为绝对,那么#Box_2会重叠#Box_1.
Box_1 {
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}
#Box_2 {
position: absolute;
width: 200px;
height: 200px;
background: #44accf;
}
Box_1">Box_2">>另一个框(Box_1)的位置如何影响另一个/兄弟div(Box_2)的位置.是不是’绝对’应该永远绝对只是立即非静态父母？
>在上面的css中(在Box_1中有“position：relative;”),如果我添加“top：0;”到#Box_2,然后Box_2似乎再次重叠.为什么会这样？
最佳答案
如果您未指定任何顶部,右侧,底部或左侧属性,则无论其祖先是否位于任何位置,绝对定位的元素都将保持其静态位置.这就是为什么当你只是将它设置为位置时,#Box_2似乎没有发生任何事情：绝对 – 相反,它受#Box_1的影响,就像你没有指定position：absolute一样.
原文链接：https://www.f2er.com/html/425929.html但请注意,#Box_1仅影响#Box_2,因为1优先于2;一旦你绝对定位#Box_2它就会从流程中取出,任何跟随它的兄弟姐妹都会流动,好像#Box_2不再存在.请参阅this example,其中我创建一个与#Box_1相同的#Box_3,并在#Box_2之后添加#Box_3,其中#Box_3与#Box_2重叠,因为3在正常流程中没有看到2;它只看到1.
一旦你设置top：0到#Box_2,它就知道它必须被附加到视口的顶部(因为它的包含块,因为它的祖先都没有被定位).
