position(定位）详谈

在html页面布局中定位是非常重要的，这里呢我们只讲到css基本的绝对定位(absolute)、相对定位(relative)和固定定位(fixed)。css3涉及的粘性定位(sticky)我们就不做深究。
1、相关属性值
A、position：static;默认值
B、position：absolute;绝对定位
C、position：relative;相对对定位
D、position：fixed;固定定位
E、position: sticky; 粘性定位

2、定位作用

A、在正常情况下，可以让一个元素覆盖在另外一个元素上面
B、可以移动一个元素的位置,让它到自己想要的位置
C、可以固定某个容器在浏览器窗口的某个位置不动

总之定位是非常重要的也是非常有用的
下面我们就来详细谈一谈几个定位的基本信息

position:relative; 相对定位

1、文档流

不脱离文档流，相对定位之后，该元素是占浏览器位置

2、移动位置的时候参照物 只有1个

利用left  right  bottom  top移动位置的时候
参照物是自己的初始位置  移动位置之后，原来的空间还在。

3、层叠顺序

多个元素给完相对定位之后，如果没有移动位置，那么他们之间就不会覆盖现象。
如果移动了位置，那么后面的元素还是会覆盖前面的元素。
可以通过z-index改变层叠顺序
在一个包含结构里面，父元素是相对定位，子元素是绝对定位
子元素的参照物是父元素，父元素的参照物是自己的初始位置

下面举个例子

<style>
		.boxs {
			width: 500px;
			height: 500px;
			background: green;
		}

		.a1 {
			width: 200px;
			height: 200px;
			background: skyblue;
			position: relative;
			top: 200px;
			left: 500px;
		}

		.a2 {
			width: 200px;
			height: 200px;
			background: red;
		}
	</style>

<div class="boxs">
		<div class="a1">a1</div>
		<div class="a2">a2</div>
	</div>

a1偏离了原本的位置，移动到父元素之外了，而a2并没有将a1的位置占用。

position:absolute; 绝对定位

1、文档流

 脱离文档流    当一个元素绝对定位之后，该元素是悬空的，
 下面的元素如果没有定位则会上 去，被覆盖（全脱离）
 浮动之后也是脱离文档流，但是浮动之后下面的容器会上去，里面的文字会环绕显示。（半脱离）
 如果多个元素同时给了绝对定位，他们之间的层叠顺序是，结构在后的元素在最上面。 

2、移动位置的时候参照物

定位之后想要移动位置，可以用margin或者用
left   top  bottom   right属性移动位置
参照物1： 浏览器的第一屏  
参照物2：是父元素  前提条件是有父元素且父元素有定位（可以是绝对、固定、相对）。	

3、层叠顺序（z-index必须有定位才可以用）

如果想要改变定位之后的层叠顺序，可以通过一个属性  z-index属性改变
z-index的默认值是0  不带单位可以给负值
值越大，层越靠上  没有最大值也没有最小值

下面这个例子包含absolute 的层叠顺序和改变层叠顺序的方法

<style>
  .a1 {
            width: 500px;
            height: 100px;
            background: yellow;
            position: absolute;
        }
        .a2 {
            width: 400px;
            height: 200px;
            background: skyblue;
            position: absolute;
            z-index: 1;
        }
        .a3 {
            width: 420px;
            height: 300px;
            color: #fff;
            background: blue;
            position: absolute;
            z-index: 3;
        }
        </style>
        	

<div class="a1">老大</div> 
<div class="a2">老二</div> 
<div class="a3">老三</div>

给a2设置z-index级别最高，可以看出本该按a1\a2\a3的层叠顺序由a1\a3\a2排列了，这就是z-index属性的作用。

position:fixed; 固定定位

1、文档流

脱离文档流，但是该元素会固定在某个位置不动

2、用top left right bottom移动位置的时候参照物

 参照物是浏览器的当前窗口

3、层叠顺序

 多个元素同时给了固定定位，结构上后面的元素会盖在最上面
 固定定位的层叠顺序也可以用z-index改变
 绝对定位和固定定位之间的相同点和不同点

当使用了固定定位时，元素会一直固定在浏览器的窗口，无论你怎么滚动窗口，都不会移动，如果你想写个小广告固定在屏幕上的话，就会用到它，

absolute和fixed相同点：

都会脱离文档流，并且都定位之后，结构在后面的元素会覆盖在最上面
都可以通过z-index来改变层叠顺序，也可以都用left top right bottom移动位置

absolute和fixed不同点：

1、参照物不同
绝对定位的参照物有2个，A是浏览器的第一屏 B就是有定位的父元素
固定定位的参照物只有1个，是浏览器的当前窗口。
2、固定定位之后该元素就固定在某个位置了，拖动窗口的时候，不再改变

移动一个元素的位置：
1、可以用margin
2、可以用定位+left或者right/bottom/top
3、也可以用 transform：translate（）；

position:sticky; 粘性定位 导航的吸顶效果

粘性定位是相对和固定定位的混合体。
该元素被视为相对定位，直到它超过一定的范围之后，
此时它被视为固定定位。

以上就是position定位的基本内容，如有更深理解，往各位给出意见和建议。