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 是根据元素是否达到设定了的阈值决定的。

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

   padding: 24px   ;

 }

 dt {

   background: #B8C1C8;

   border-bottom: 1px solid #989EA4;

   border-top: 1px solid #717D85;

   color: #FFF;

   font: bold 18px/21px Helvetica, Arial, sans-serif;

   margin: ;

   padding: 2px   12px;

   position: -webkit-sticky;

   position: sticky;

   top: -1px;

 }

 dd {

   font: bold 20px/45px Helvetica, Arial, sans-serif;

   margin: ;

   padding:    12px;

   white-space: nowrap;

 }

 dd + dd {

   border-top: 1px solid #CCC

 }

巴特西