position: sticky; 粘性布局

粘性布局: 结合了 position:relative 和 position:fixed 两种定位于一体的特殊定位,适用于一些特殊场景。具体说明可查看 MDN-position
如下图:
要求滑动时固定第一行 ,第一列

样例.png

滑动后.png

   position: sticky;  /* 实现粘性布局 */
   top: 100px; /* 固定的位置为距离顶部100px的位置,当设置区域滑动到距离父窗口顶部100px的位置固定 */
   left: 100px; /* 固定的位置为距离左侧100px的位置,当设置区域向左滑动到距离父窗口左侧100px的位置固定 */
   z-index: 1; /* 显示层级 */



  
  
  position: sticky; 粘性布局
  


  

3

你可能感兴趣的:(position: sticky; 粘性布局)