css3增加的的属性值position:stricky

position:sticky

sticky 英文字面意思是粘，粘贴。这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

什么是结合两种定位功能于一体呢？

元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

定位类型

定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素。
相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

设计导航https://www.wode007.com/favorites/sjdh

生效规则

position:sticky 的生效是有一定的限制的，总结如下：

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。

这里需要解释一下：

如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

 1 <div>
 2   <dl>
 3     <dt>A</dt>
 4     <dd>Andrew W.K.</dd>
 5     <dd>Apparat</dd>
 6     <dd>Arcade Fire</dd>
 7     <dd>At The Drive-In</dd>
 8     <dd>Aziz Ansari</dd>
 9   </dl>
10   <dl>
11     <dt>C</dt>
12     <dd>Chromeo</dd>
13     <dd>Common</dd>
14     <dd>Converge</dd>
15     <dd>Crystal Castles</dd>
16     <dd>Cursive</dd>
17   </dl>
18   <dl>
19     <dt>E</dt>
20     <dd>Explosions In The Sky</dd>
21   </dl>
22   <dl>
23     <dt>T</dt>
24     <dd>Ted Leo & The Pharmacists</dd>
25     <dd>T-Pain</dd>
26     <dd>Thrice</dd>
27     <dd>TV On The Radio</dd>
28     <dd>Two Gallants</dd>
29   </dl>
30 </div>
31 * {
32   box-sizing: border-box;
33 }
34 
35 dl {
36   margin: 0;
37   padding: 24px 0 0 0;
38 }
39 
40 dt {
41   background: #B8C1C8;
42   border-bottom: 1px solid #989EA4;
43   border-top: 1px solid #717D85;
44   color: #FFF;
45   font: bold 18px/21px Helvetica, Arial, sans-serif;
46   margin: 0;
47   padding: 2px 0 0 12px;
48   position: -webkit-sticky;
49   position: sticky;
50   top: -1px;
51 }
52 
53 dd {
54   font: bold 20px/45px Helvetica, Arial, sans-serif;
55   margin: 0;
56   padding: 0 0 0 12px;
57   white-space: nowrap;
58 }
59 
60 dd + dd {
61   border-top: 1px solid #CCC
62 }