position 定位

position 用于定位元素. 它有五个不同的位置属性:

1. position: static (默认）

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

2. position: relative (相对定位)

position: relative; 的元素相对于其正常位置进行定位。

相对定位会占有原来的位置

3. position: absolute (绝对定位)

position: absolute; 的元素相对于最近的定位祖先元素进行定位。

如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注意：“被定位的”元素是其位置除 static 以外的任意定位元素。绝对定位是不占原来的位置的

4. position: fixed (固定定位)

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。

固定定位的元素不会在页面中,也就是不会占据位置

5. position: sticky (黏性定位)

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

案例:

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; //top为0就是顶部。  意思就是当定位到达页面顶部时,就会固定位置,没到达之前就会随着页面滚动
  background-color: green;
  border: 2px solid #4caf50;
}