在CSS中,: absolute;可以让一个元素脱离文档流,并可以通过设置top、right、bottom、left属性来进行定位。然而,如果只写了: absolute;,却没有设置top、right...
在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
元素