CSS定位

1.什么是定位？

        position属性用于指定一个元素在文档中的定位方式。并通过top、left、right和bottom来决定该元素最终的位置。

语法：position：static | relative | fixed | absolute | sticky；top：0px；left：0px；

该属性的使用方法是，先指定元素的定位方式，如：静态定位、相对定位、固定定位、绝对定位、粘性定位；然后再去设置定位后的元素相较于定位位置上下左右的距离。

2.1 静态定位（static）

        该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。

2.2 绝对定位（relative）

        该关键字下，元素先放置在未添加定位时的位置（也就是红色边框的左上角处），再在不改变页面布局的前提下调整元素位置（即top、left、right和bottom的值，一般就设置top和left的值就可以了，因为定位改变了位置，因此会在此元素未添加定位时所在位置留下空白）。

2.3 相对定位（absolute）

        元素会被移出正常文档流，并不为元素预留空间。这一点 很像浮动。通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。这里需要说一下的是，绝对定位在不给其外部元素添加相对定位时，其绝对定位是相较于body来进行的。在给其外部元素添加了相对定位后，再给内部元素添加绝对定位，就是相对于添加了绝对定位的元素来进行的了。

        

2.4 固定定位（fixed）

        元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视(viewport)的位置来指定元素位置。由下图可以很直观的看到，元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。