position  

使元素相对于定位参考元素发生指定方向和数值的便宜

任意元素可以设置，不会与其他属性发生冲突 

1，定位参考元素

2，可选属性值 static（静态 自然模型） relative（相对定位模型） absolute (绝对定位模型) fixed（固定定位模型）

relative

相对定位  不脱离文档流 提升层叠性

定位参考元素：元素在文档流中的位置

用途：提升层叠性    作为绝对定位元素的相对父级

absolute

脱离文档流和文本流（会覆盖文字）提升层叠性     绝对定位的默认宽高是内容决定的，可以设置宽高和盒模型

定位参考元素：祖先元素中，离他最近设置了定位属性作为参考元素，如果没有找到会参考根元素

元素的居中定位:

1，先向右偏移容器的一般的宽度，再向左偏移定位元素宽度的一般，反向同理

2，position:absolute        

       left:0;            

       right:0;

       top:0;

       bottom:0;

      margin:auto;

不进行偏移，让margin去计算，实现居中   另外没有设置宽高的元素可以使用偏移值设置宽高，可以实现占满父级包裹元素

fixed

固定定位：定位参考元素：浏览器的内容可视区域

堆叠问题：就近原则

定位元素会产生层次级，默认情况，后面的元素堆在上面

定位元素的堆叠顺序：

z-index（ z轴的堆叠顺序） 数值越大，越在上面（可以设置负值）

偏移值:元素相对与参考元素的偏移值

                left: 正值(元素相对与参考元素左边向右偏移)    负值(元素相对与参考元素左边向左偏移)

                top:  正值(元素相对与参考元素顶边向下偏移)    负值(元素相对与参考元素顶边向上偏移)

                right:正值(元素相对与参考元素右边向左偏移)    负值(元素相对与参考元素右边向右偏移

                bottom:正值(元素相对与参考元素底边向上偏移)  负值(元素相对与参考元素底边向下偏移

                同一个方向: 水平方向left优先生效,没有left,right  才会生效

                            垂直方向 top 优先生效,没有top,bottom才会生效

可以用绝对定位实现