[分享]css中absolute的默认值

在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>