固定定位类似于绝对定位,所不同的是该元素的包含块是通过所建立的含初始块视口中,除非任何祖先具有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 ;
}