css定位

css定位属性：position 作用为检索或者设置元素的定位方式（改变元素的位置的属性）
那position有哪些属性值呢？

1.静态定位：static
				position的默认值，默认文本流的状态
				不会识别left、right、top、bottom 指定的坐标
				
2.绝对定位：absolute
				参照物：按照已有定位的父元素进行位置的变化
				假如当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物
				绝对定位，脱离文档流，不占据空间
				
3.相对定位：relative
				参照物：自身默认的位置
				始终占据空间，不会破坏文档流
				
4.固定定位：fixed
				参照物：浏览器窗口
				脱离整个文档流，不占据空间
				
5.粘性定位：sticky
				相对定位relative 和	固定定位fixed 的结合
				如果页面没有超过窗口范围，按照relative执行
				如果页面超过窗口设置，按照fixed执行
				
**定位的步骤**
			1.给元素添加 position属性，证明元素要做位置的变化
			2.确定参照物（通过position属性的属性值来确定：static/absolute/relative/fixed/sticky）
			3.确定坐标： left盒子往右移
						right盒子往左移
						top盒子往下移
						bottom盒子往上移
						ps：负数表示相反方向

现在让我们来实操一下吧！！！
绝对定位：
1.现在是没有添加定位的情况下

现在我们开始添加定位


相对定位 因为自身就是参照物，只要给自身添加定位relative 就可以了


固定定位
固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
ps：IE6不兼容。

用途1：网页右下角的“返回到顶部”
用途2：顶部导航条
固定在网页顶端的导航条，可以用固定定位来做。

Z-index属性
1.后定位的元素会把前面定位的盖住
2.控制定位元素的层次关系
3.默认值为一个数字（可以为负数），数字越大，层次关系越高
4.默认值 auto

包含块的设置
1.如果父元素为参照物 添加：position：relative;
2.给要做定位的子元素 添加：position：absolute;