CSS3 中 positions：ticky

关于 position 属性主要是四种：

static：

默认值，没有定位，静态定位的元素不会受到 top、bottom、left、right 影响

relative：

相对定位，相对定位元素的定位是相对其他正常位置，一般和绝对定位一起使用

fixed：

固定定位，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

absolute：

绝对定位，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html，经常和相对定位结合使用

那么sticky是什么意思呢?

sticky是CSS3定位新增属性，可以说是相对定位relative和固定定位fixed的结合；主要是用在对scroll事件的监听。

简单来说，在滑动的过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(例如top:100px)，position:sticky此时的效果相当于fixed定位，固定在适当的位置。

position:sticky:基于用户的滚动位置来定位。在跨域特定阈值前为相对定位，之后称为固定定位。

MDN上的案例：

html

<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>

css

* {
  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
}