CSS之position属性揭秘

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

2. relative相对定位
   相对定位并未脱离文档流，在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

   
   
   
   

3. absolute绝对定位
   绝对定位脱离了文档流，绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。
   absolute常与relative配合使用
   

   
   

4. fixed固定定位
   固定定位也脱离了文档流，通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
   该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。

5. sticky粘性定位
   粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

 position: sticky; top: 10px; 

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。