元素的定位属性
定位模式和边偏移两部分.
边偏移：
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
|---|---|
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
定位模式：
所有元素默认的的定位，唯一的作用就是取消定位。position: static
2、相对定位：relative**
特点：
2.并且每次移动的时候是以自己的位置（盒子左上角）为中心移动
3.浮动在其他标准流上面（脱离标准流）
样例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.pos1 {
width: 100px;
height: 100px;
background-color: red;
position: relative; /*相对定位*/
top: 100px;
left: 100px;
}
.pos2 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="pos1"></div>
<div class="pos2"></div>
</body>
</html>
1.绝对定位不占据位置，类似浮动
2.当没有父元素的时候，元素的绝对定位是以当前浏览器屏幕为准对齐的，不管body有多大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 2000px;
}
.pos1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute; /*绝对定位*/
right: 0;
bottom: 0;
}
.pos2 {
width: 110px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="pos1"></div>
<div class="pos2"></div>
</body>
</html>效果如下图：
如果所有的父元素（祖先）都没有定位，则当前绝对定位的子元素同样以当前浏览器屏幕为准移动。
注意：一般父子配合使用定位的时候，推荐使用---子盒子使用绝对定位（不占位置），父盒子使用相对定位（占据位置）
特点：
1.固定定位不占据位置，脱离了标准流，浮动在上面，不随鼠标运动