首先说一下浮动的作用及其缺陷：

        作用：浮动让元素脱离文档流，在新的图层当中水平排列，所有元素添加float属性之后都会变成行内块级元素inline-block。

        缺陷：只能顶端对齐相对于父容器四个角进行布局。

        定位可以看成是增强版的浮动，增强的地方就是：可以随意浮动在父元素容器内的任何位置，摆脱浮动的布局限制。定位=定位模式+位置偏移。

目录

一，position属性

二，位置偏移属性

三，相对定位relative

四，绝对定位absolute

4.1 子绝父相布局

五，固定定位fixed

5.1 利用算法实现fixed定位紧跟版心

六，粘性定位sticky

七，图层顺序z-index

八，定位总结 

九，定位的拓展

9.1 绝对定位实现居中

9.2 文字让float而不让绝对定位

9.3 任何元素绝对定位后都为行内块元素

---

一，position属性

                用于声明元素的定位模式。其中，static是默认值；relative相对定位，效果类似于transtion变换中的translate；absolute是浮动的；fixed是浮动的，位置偏移相对于viewport。

二，位置偏移属性

        只有声明position属性之后才能设置。 

三，相对定位relative

        看上去脱离文档流，但是原来的位置还存在，故可以看成伪浮动，因为没有脱标。相对于其原来的位置进行移动，可以看成是元素中心的移动。移动的坐标为：y轴向下，x轴向右。。

四，绝对定位absolute

        脱离文档流，在新图层上浮动，相对于最近一级具有定位属性(相对，绝对，固定)的父容器的四个角进行移动定位，若没有父元素或父元素没有定位属性，则相对于html文档进行定位。

4.1 子绝父相布局

        即：父元素嵌套子元素，子元素使用绝对定位，则父元素使用相对定位，这是实际开发中的技巧。

        子元素使用绝对定位，子容器在最上层的图层进行布局，不会影响父元素图层的布局；而由于绝对定位需要相对于最近一层有定位属性的高辈元素，所以父元素要使用定位，而相对定位不脱标，文档流布局不会发生元素塌缩的问题。

五，固定定位fixed

        脱离文档流，在新图层浮动，相对于viewport的四个角进行移动。

5.1 利用算法实现fixed定位紧跟版心

六，粘性定位sticky

        粘性定位是指在相对定位和固定定位之间进行交换，一旦超过临界值，如top:0，则会从相对定位变成粘性定位。

七，图层顺序z-index

        表示z轴方向的顺序，z轴就是垂直与电脑平面向外指向人的方向。一般给容器设置该属性，属性值越大表示在最上层。如果不设置该属性值，则后来居上显示。

八，定位总结 

九，定位的拓展

9.1 绝对定位实现居中

        代码如下：

9.2 文字让float而不让绝对定位

        指的是HTML文字内容遇到float属性的容器会误认为容器原来的位置还存在。而遇到绝对定位则不会。换一种说法：浮动的图层不会遮住文档流的文字，而绝对定位的图层会。

        这个效果与word中给图片设置环绕方式类似。因为浮动的发明就是解决文字环绕图片的问题。

9.3 任何元素绝对定位后都为行内块元素

        行内元素绝对|固定定位之后，都可以设置width和height属性设置盒子模型content部分的大小。盒子大小由内容撑开。