首页 > 代码库 > 相对定位和绝对定位

相对定位和绝对定位

相对定位和绝对定位
相对定位:position:relative;
相对定位是让元素在当前位置上移动;
exp:
box{
position:relative;
left:20px;
top:30px;
}
表示让box元素从当前位置开始,向左移动20px;向下移动30px;
绝对定位:position:absolute;
绝对定位是让元素从浏览器的0 0点开始移动;
exp:
box{
position:absolute;
left:20px;
top:30px;
}
表示让元素从浏览器的0 0点开始,向左移动20px,向下移动30px;
注:绝对定位会脱离文档流,行内元素会被自动视为块级元素。
在编写网页时,有一些元素位置特殊,使用浮动难以将其放在对应位置时,可以使用浮动。在使用定位时,需要给元素的父级相对定位,再使用绝对定位给元素设定位置。
exp:
box{
width:200px;
height:200px;
position:relative;
}
box_1{
position:absolute;
left:20px;
top:20px;
}
这段代码就能让box_1这个元素从box元素的0 0点开始,向左下各移动20px;

另:若想让元素固定在某一位置则使用:position:fixed。

相对定位和绝对定位