position用法区别

用法

静态定位（static）

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

个人理解：这个属性并未脱离常规文档流的布局属性所以无法使用像absolute与relative使用left、bottom等属性。

相对定位（relative）

该关键词下，元素先放置在未添加位置的位置，再不改变页面布局的前提下调整单元素位置（因此会再次元素未添加定位是所在位置留下空白）。position：relative；对table-group，table-row，table-column，table-column，table-cell，table-caption元素无效。

个人理解：相对定位是在原来的位置上进行上下平移，与margin属性有些相似，但又不完全一样。margin是将容器的外边距扩大，也就是将容器的范围扩大面积不变；relative是将整个容器进行平移，但不影响其他容器。

绝对定位（absolute）

元素会被移出正常的文档流，并不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margin），且不会参与其他边距合并。

个人理解：使用绝对定位的容器已经是脱离了常规文档独立之外的容器，其面积大小，外边距的范围已经影响不小常规流的位置，不过常规流会背绝对定位的容器覆盖，position的属性之间的覆盖（除了static）就看设置position属性的先后，先设置的被覆盖，想改变，可以设置z-index的属性。若祖先元素中没有 position属性（static除外），该容器就会以页面最大的容器为边界进行定位。

固定定位（fixed）

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动是不会改变。打印时，元素会出现的每页固定位置。fixed属性会创建新的上下文。当元素祖先的transform，perspective或filter属性非none时，容器由视口改为祖先。

个人理解：固定定位就是将容器固定在屏幕视口的某一个位置，不会随着滚动条的移动而移动。

粘性定位（sticky）

元素根据正常文档流进行交流定位，然后相对它的最近滚动祖先和containing block包括table-related元素，甚至于top，right，bottom和left的值进行偏移。偏移值不会影响任何其他元素的位置。

个人理解：设置粘性定位属性的容器，在拉动滚动条时在父容器的范围内都会与滚动的边界保持着设定的值的距离，过了父元素就会超出屏幕视口。

区别

静态定位属于常规文档流，没有left等属性；
相对定位没有脱离常规文档流，可以使用left等属性；
绝对定位脱离常规文档流，不占据空间；
固定定位脱离常规文档流，但定位边界是屏幕视口；
粘性定位脱离常规文档流，定位边界是滚动条；