/*,全局值,*/位置:,继承;
初始位置:,;
位置:,复原; 估计大部分都没有用过<代码>位置:粘性吧。这个属性值还在试验阶段。怎样描述它呢?
<强>初窥位置:粘性
粘英文字面意思是粘,粘贴,所以姑且称之为粘性定位。下面就来了解下这个处于实验性的取值的具体功能及实用场景。
这是一个结合了位置:相对和位置:固定两种定位功能于一体的特殊定位,适用于一些特殊场景。
什么是结合两种定位功能于一体呢?
元素先按照普通文档流定位,然后相对于该元素在流中包含块的流根黄东海)和(最近的块级祖先元素)定位。
而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是,对,下或左之一,换言之,指定,对,下或左四个阈值其中之一,才可使粘性定位生效,否则其行为与相对定位相同。
<代码>粘:对象在常态时遵循常规流。它就像是相对<代码> 和<代码> 固定的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如固定的。该属性的表现是现实中你见到的吸附效果。
常用场景:当元素距离页面视口(视窗,也就是固定的定位的参照)顶部距离大于0 px时,元素以<代码> 相对定位表现,而当元素距离页面视口小于0 px时,元素表现为<代码> 固定定位,也就会固定在顶部。
代码:
{
,,,位置:,-webkit-sticky;
,,,位置:,粘性;
,,,:,0;
} 如下图表现方式:
距离页面顶部<代码>大于20 px> 位置:相对>
距离页面顶部<代码>小于20 p x,表现为<代码>位置:固定>
运用<代码>位置:粘性实现头部导航栏固定
html代码:
& lt; div 类=癱on"比;
,,,& lt; div 类=皊amecon"比;
,,,,,,,& lt; h3>标题一& lt;/h3>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,& lt;/div>
,,,& lt; div 类=皊amecon"比;
,,,,,,,& lt; h3>标题二& lt;/h3>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,& lt;/div>
,,,& lt; div 类=皊amecon"比;
,,,,,,,& lt; h3>标题三& lt;/h3>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,& lt;/div>
,,,& lt; div 类=皊amecon"比;
,,,,,,,& lt; h3>标题四& lt;/h3>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,& lt;/div>
,,,& lt; div 类=皊amecon"比;
,,,,,,,& lt; h3>标题五& lt;/h3>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,& lt;/div>
,,,& lt; div 类=皊amecon"比;
,,,,,,,& lt; h3>标题五六& lt;/h3>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,,,,,& lt; p>这是一段文本& lt;/p>
,,,& lt;/div>
& lt;/div> CSS代码:
.samecon h3 {
,,,位置:,-webkit-sticky;
,,,位置:,粘性;
,,,:,0;
,,,背景:# ccc;
,,,填充:10 px 0;
null
