一、五种定位类型
- 粘性定位

Position 布局能够让我们把一个元素从它原本在 Normal Flow 中应该在的位置移动到另一个位置。
Position 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置

一、五种定位类型

有五种主要的定位类型

静态定位
- position: static
- 每个元素默认的属性，表示将元素放在 Normal Flow 的默认位置
相对定位
- position: relative
- 允许我们相对于元素在 Normal Flow 中的位置移动它
绝对定位
- position: absolute
- 相对于该元素的最近被定位祖先元素的 content box 的上边缘
- 如果没有最近被定位的祖先元素，则是相对于页面的 <html> 元素边缘固定
固定定位
- position: fixed
- 元素相对浏览器视口固定
粘性定位
- position: sticky
- 让元素先保持和position: static一样的定位
- 当它的相对视口位置达到某一个预设值时，他就会像position: fixed一样定位

粘性定位

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

#one { 
  position: sticky; 
  top: 10px; 
}

在可视区域中，在元素与浏览器视口上边缘，距离大于 10px 时，元素是相对定位。
当元素与浏览器视口上边缘，距离小于等于 10px 时，元素是固定定位。直到该元素的父元素离开可视区域，该元素则留在父元素的尾部，随着父元素离开可视区域。

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

<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>

* {
  box-sizing: border-box;
}
dl {
  margin: 0;
  padding: 24px 0 0 0;
}
dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}
dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}
dd + dd {
  border-top: 1px solid #CCC
}