fixed 与 sticky

Posted 2021-01-13 ggmh

固定定位类似于绝对定位，所不同的是该元素的包含块是通过所建立的含初始块视口中，除非任何祖先具有transform，perspective或filter属性设置为比其他的东西none（参见CSS转换规格），然后使该祖先取代包含块的元素。这可用于创建“浮动”元素，无论滚动如何，该元素都保持在相同位置。在下面的示例中，框“One”固定为距离页面顶部80像素，距离左侧10像素。即使在滚动之后，它仍然保持在相对于视口的相同位置。

#one  { 
  position ： fixed ; 
  上： 80px ; 
  左： 10px ; 
  背景：蓝色; 
}   fixed固定块不会随鼠标滑动而滑动

粘性定位可以被认为是相对定位和固定定位的混合。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定的，直到它到达其父母的边界。例如...

#one  {  position ： sticky ;  上： 10px ;  }

...将定位与ID的元素一个相对直到视口被滚动，使得该元件将是从顶部小于10个像素。超过该阈值，元素将固定为从顶部10像素。

粘性定位的常见用途是用于按字母顺序排列的列表中的标题。“B”标题将出现在以“A”开头的项目下方，直到它们在屏幕外滚动。然后，“B”标题将保持固定在视口的顶部，直到所有“B”项目都在屏幕外滚动，此时它将被“C”覆盖，而不是使用其余内容滑动屏幕。标题，等等。

你必须有至少一个指定的阈值top，right，bottom，或left为粘稠定位像预期的那样。否则，它将与相对定位无法区分。

dt  { 
  background ：＃B8C1C8 ; 
  border-bottom ： 1px solid＃989EA4 ; 
  border-top ： 1px solid＃717D85 ; 
  颜色： #FFF ; 
  字体：粗体18px / 21px Helvetica，Arial，sans-serif ; 
  保证金： 0 ; 
  填充： 2px 0 0 12px ; 
  职位： -webkit-sticky ; 
  位置：粘; 
  上： -1px ; 
}