相对定位的3个特点：
1.相对原有位置进行偏移
2.仍处于标准文档流中
3.给元素设置position:relative属性后，该元素随即拥有偏移和z_index属性
例：如下布局1
<html>
<head>
<title>Title</title>
<style type="text/css">
body{
border: 4px solid #eee;
}
.box1{
height: 50px;
background: red;
}
.box2{
height: 50px;
background: blue;
}
.box3{
height: 50px;
background: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果如下：是一个标准的流式布局
1.png
当我们给box2设置相对定位，向下偏移 30px,向右偏移100px.(这里需要注意设置top表示向下偏移，left表示向左偏移)
.box2{
height: 50px;
background: blue;
position: relative;
top: 30px;
left: 100px;
}
效果如下：
可以看到box2元素，基于原来的位置，向左偏移了100px,向下偏移了30px. 证明特点1.
特点3，可以这样理解，如下图box2遮盖住了box3元素的布局位置，可以把box2认为是在z轴和box1不在一个平面上，所以会有遮盖效果。
2.png
这里重点说明一下特点2，下图中粉色框住的是box2偏移前的布局位置，可以看到给box2设置偏移后，他原来的布局位置还是存在，还在占着在文档流中相同的位置。
3.png
绝对定位的特点：
1. 建立了以包含块为基准的定位
2. 完全脱离了标准文档流
3. 随即拥有偏移属性和z-index属性
例：如下布局2
<html>
<head>
<title>Title</title>
<style type="text/css">
.box1{
height: 50px;
background: red;
}
.box2{
height: 50px;
background: blue;
position: absolute;
}
.box3{
height: 50px;
background: green;
}
</style>
</head>
<body>
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<div class="box3">我是box3</div>
</body>
</html>
效果图如下：
4.png
这里我们可看到，给box2设置了绝对定位属性后，box3整体上移了。感觉上就像是和box2不在同一层上。 这个就是绝对定位的第2个特点，给元素设置了绝对定位后，元素会整体脱离标准文档流。
比如现在，box2的大小，不会影响和他相邻元素的位置，也不会影响它父元素的位置。
还有一个重点是，我们观察到给box2设置了绝对定位属性后，box2的宽度是他的内容宽度。而不在是块级元素的默认一占一行了。
特点：当给一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。
另外我们看到box2的位置还是在它原来的位置，这里还有一个特点是：
特点：未设置偏移属性时，无论是否存在已定位祖先元素，都保持在元素的初始位置。
absolute与fixed的相同点 ：
1. 完全脱离了标准文档流—兄弟元素不再受其影响
2. 以父包含块为基准定位—初始位置在父包含块的左上角
absolute与fixed的区别 ：
1.偏移参照基准
absolute
无已定位祖先元素，以<html>为 偏移参照基准
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
fixed
有、无已定位祖先元素，均以浏览器可视窗口为偏移参照基准
2.表现形式（产生滚动条时）
absolute
位置会随滚动条变化
fixed
位置固定，不会随滚动条变化
被他遮盖的元素，可以从其下穿过
网友评论