相对定位和绝对定位

Posted 2020-09-27

相对定位和绝对定位
相对定位：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。