position(六种属性，以及每个属性的特点)

1、relative（相对定位）

relative定位是相对于元素的原始位置对该元素进行移动；
移动相对定位元素，它原本所占空间不会改变；
提升层级用z-index。

2、absolute（绝对定位）

absolute定位的元素的位置是相对于最近的已定位的父元素（除static），若元素没有已定位的父元素，它的位置就相对于；
absolute一般配合relative使用（将父元素设置相对定位，使其相对于父元素偏移）；
absolute定位使元素的位置与文档流无关，不占空间；
absolute定位的元素可设置margin,且不会与其他边距合并；

提升层级用z-index。

3、fixed（固定定位）

元素位置相对于浏览器窗口是固定位置，即使窗口滚动他也不会移动;
fixed定位使元素的额位置与文档流无关，因此不占空间；

提升层级用z-index；
fixed定位在IE7和IE8下需描述！DOCTYPE。

4、sticky(粘性定位)

基于用户的滚动位置来定位；
sticky定位的元素是依赖于用户的滚动，在relative和fixed之间切换；
元素定位表现为在跨越特定阈值前为relative，之后为fixed的，会固定在目标位置；
此特定阈值指的是top、right、bottom、left或其中之一，指定这四个阈值其中之一，才会使sticky生效，否则其行为与relative相同；
IE，Edge 15及之前IE版本不支持sticky,Safari需用-webkit -sticky。
案例参考菜鸟教程

5、static（静态定位）

HTML元素的默认值，没有定位，遵循正常的文档流对象；
静态定位的元素不受top,bottom,left,right影响。

6、inherit

继承父元素的定位方式

重叠的元素（ z-index）

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素；
z-index只能在position属性值为relative或absolute或fixed的元素上有效；
z-index属性指定了一个元素的堆叠顺序。

其他

left、top、right、bottom需和position配合使用，缺少其中任何一方，都使得定位无效；
margin:表示外边距，容器外部距离其他容器的间距；
padding:表示内间距，容器内的内容距离容器本身各边上的边距，不允许为负。