html – div上的CSS位置如何影响兄弟分区的位置？

发布时间：2020-12-14 22:49:53 所属栏目：资源来源：网络整理

导读：我一直在经历CSS Positions articles on Alistapart.下面的片段引起了我的注意,无法理解背后的理论. 在html / css下面显示两个框,一个在另一个上面.但是,如果我将#box_1的位置更改为绝对,那么#box_2会重叠#box_1. 另一个框(box_1)的位置如何影响另一个/兄弟d

我一直在经历CSS Positions articles on Alistapart.下面的片段引起了我的注意,无法理解背后的理论.

在html / css下面显示两个框,一个在另一个上面.但是,如果我将#box_1的位置更改为绝对,那么#box_2会重叠#box_1.


>另一个框(box_1)的位置如何影响另一个/兄弟div(box_2)的位置.是不是’绝对’应该永远绝对只是立即非静态父母？
>在上面的css中(在box_1中有“position：relative;”),如果我添加“top：0;”到#box_2,然后box_2似乎再次重叠.为什么会这样？


最佳答案
如果您未指定任何顶部,右侧,底部或左侧属性,则无论其祖先是否位于任何位置,绝对定位的元素都将保持其静态位置.这就是为什么当你只是将它设置为位置时,#box_2似乎没有发生任何事情：绝对 – 相反,它受#box_1的影响,就像你没有指定position：absolute一样.
但请注意,#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,它就知道它必须被附加到视口的顶部(因为它的包含块,因为它的祖先都没有被定位).
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!