Position属性的一些特点

相对定位的3个特点：
1.相对原有位置进行偏移
2.仍处于标准文档流中
3.给元素设置position:relative属性后，该元素随即拥有偏移和z_index属性

例：如下布局1

效果如下：是一个标准的流式布局

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

    
    


    
我是box1
    
我是box2
    
我是box3

效果图如下：

4.png

这里我们可看到，给box2设置了绝对定位属性后，box3整体上移了。感觉上就像是和box2不在同一层上。 这个就是绝对定位的第2个特点，给元素设置了绝对定位后，元素会整体脱离标准文档流。
比如现在，box2的大小，不会影响和他相邻元素的位置，也不会影响它父元素的位置。

还有一个重点是，我们观察到给box2设置了绝对定位属性后，box2的宽度是他的内容宽度。而不在是块级元素的默认一占一行了。
特点：当给一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。

另外我们看到box2的位置还是在它原来的位置，这里还有一个特点是：

特点：未设置偏移属性时，无论是否存在已定位祖先元素，都保持在元素的初始位置。

absolute与fixed的相同点 ：

1. 完全脱离了标准文档流—兄弟元素不再受其影响
2. 以父包含块为基准定位—初始位置在父包含块的左上角

absolute与fixed的区别 ：
1.偏移参照基准
absolute
无已定位祖先元素，以为 偏移参照基准
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准

fixed
有、无已定位祖先元素，均以浏览器可视窗口为偏移参照基准

2.表现形式（产生滚动条时）
absolute
位置会随滚动条变化
fixed
位置固定，不会随滚动条变化
被他遮盖的元素，可以从其下穿过