css定位布局---position定位

定位的相关属性值：relation、absolute、fixed、static（默认值）
【relation 是相对定位、absolute是绝对定位、fixed是固定定位】
其中他们设置的偏移属性为：left、right、top、bottom
(后面的偏移属性值的单位为px )
举例
首先设置三个盒子（red，gold，brown）设置不同的大小、颜色，父元素是content

1. 相对定位

将第一个盒子red，设置相对定位 position：relation

.red{
position：relation；
left :100px
/*距离左边边距100px*/
}

它会相对它自身原本的位置偏移，并且会保留原来的位置，没有脱离文档流
（一般用来做细小的布局调整）

2. 绝对定位
   设置第二个盒子gold 绝对定位 position：absolute
   【这里修改了三个盒子的大小，都为100*100，这样看的明显一些】

.gold{
position：absolute；
left :100px
/*距离左边边距100px*/
}

从图中可以看出 绝对定位会脱离文档流
这个时候绝对定位是相对整个网页，向右偏移100px
但是当祖先元素，或者父级元素 相对定位relation后，它就会相对祖先元素或者父级元素偏移
（所以一般使用绝对定位时，回搭配相对定位一起使用）

3. 固定定位 position：fixed
   给第三个盒子brown设置固定定位

.brown{
				background-color:brown;
				width:100px;
				height:100px;
				position: fixed;
				left: 100px;
			}

向右偏移100px

图中brown同样也脱离文档流 相对整个网页偏移100px
这样的特性和绝对定位一样
但是不同的是，不管父级元素还是祖先元素设没设置相对定位
它都是始终是相对整个网页偏移的
但是它会固定在视口的这个位置，无论整个网页的高度有多高，它都会始终固定在视口的这个位置

如图所示：

这种样式，常用在侧边的 回到顶部 的侧边栏导航中