在CSS中,position: absolute;可以让一个元素脱离文档流,并可以通过设置top、right、bottom、left属性来进行定位。然而,如果只写了position: absolute
在CSS中,position: absolute;
可以让一个元素脱离文档流,并可以通过设置top、right、bottom、left
属性来进行定位。然而,如果只写了position: absolute;
,却没有设置top、right、bottom、left
,此时元素的位置是什么呢?
#box { position: absolute; }
答案是,元素的位置会根据父元素而定。如果父元素有定位属性(如position: relative;
),则该元素会相对于父元素进行定位,否则会相对于根元素进行定位。
所以,在使用position: absolute;
时,我们一定要明确元素的相对位置,否则可能会出现意想不到的错位效果。下面是一个实例,展示了没有设置top、right、bottom、left
的absolute
元素和有定位父元素的absolute
元素之间的区别:
body { position: relative; } #box1 { position: absolute; border: 1px solid red; } #box2 { position: absolute; border: 1px solid blue; left: 50px; top: 50px; } <div id="box1">没有设置top、right、bottom、left的absolute元素</div> <div id="box2">有定位父元素的absolute元素</div>
top、right、bottom、left
的absolute
元素absolute
元素粉丝
0
关注
0
收藏
0