Sticky 黏性定位兼容性css3

　　最近有点忘了position几个取值的内容，在这里简单总结一下。

　　position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。

1、position: static

　　static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。

2、position: relative

　　relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

3、position: absolute

　　absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：

　　1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。

　　2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

4、position: fixed

　　可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。

5、inherit

　　继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

　　在讲sticky之前，先上代码：

　　html：

    <h5>Relative</h5><div class="div-container div-container1"><div class="div1">static1</div><div class="div2">relative1</div><div class="div3">static1</div></div><h5>Absolute</h5><div class="div-container div-container2"><div class="div1">static2</div><div class="div2">absolute2</div><div class="div3">static2</div></div><h5>Relative contains Absolute</h5><div class="div-container div-container3"><div class="div1">static3</div><div class="div2">absolute3</div><div class="div3">static3</div></div><h5>Absolute contains Absolute</h5><div class="div-container div-container4"><div class="div1">static3</div><div class="div2">absolute3</div><div class="div3">static3</div></div>

　　具体div的定位属性可以看块中的文字，显示的效果如下，可以看到与上面讲的一致：

6、sticky

　　position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时该元素的位置并不受到定位影响（设置是top、left等属性无效），它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

position属性中最有意思的就是sticky了，设置了sticky的元素，它的表现类似position:relative和position:fixed的合体，目标区域在屏幕中可见时该元素的位置并不受到定位影响（设置是top、left等属性无效），它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会根据设置的left、top等属性成固定位置的效果。

　　可以知道sticky属性有以下几个特点：

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

　　比较蛋疼的是这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。

　　具体情况可以看下图，基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari：

　　简单的说，要让sticky属性生效的条件有以下两点：

一个是元素自身在文档流中的位置
另一个是该元素的父容器的边缘

　　第一点上面已经讲过了，如果设置了top: 50px，那么元素在页面滚动超出目标区域达到距离顶部50px时才会发生定位，否则并不会发生定位。

　　第二点则需要考虑父容器的高度情况：sticky元素在到达父容器的底部时，则不会再发生定位，如果父容器高度并没有比sticky元素高，那么sticky元素一开始就达到了底部，并不会有定位的效果。

　　此外还有一点就是父元素的overflow属性，如果父元素的overflow属性并不是默认的visible属性，那么sticky元素则相对于该父元素定位。也就是如果要定位在顶部的话，此时这个效果就无效了。

使用sticky需要注意的问题：

1.sticky不会触发BFC，

2.z-index无效，

3.当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。（这个待定）

4.父元素不能有overflow:hidden或者overflow:auto属性。

5.父元素高度不能低于sticky高度，必须指定top、bottom、left、right4个值之一。如果同时定义了left和right值，那么left生效，right会无效，同样，同时定义了top和bottom，top赢。

/* 固定到顶部*/position: -webkit-sticky; //ios必加position: sticky;top: 0;

Sticky 黏性定位兼容性css3相关推荐

css 定位兼容性,CSS基础：定位与浏览器兼容性
position属性介绍: CSS position属性用于指定一个元素在文档中的定位方式.top,right,bottom 和 left 属性则决定了该元素的最终位置. position 属性值 ...
position:sticky 粘性定位 (sticky) 与固定定位
position:sticky是css定位新增属性:可以说是static(没有定位) 和固定定位fixed 的结合:它主要用在对 scroll 事件的监听上:简单来说,在滑动过程中,某个元素距离其父 ...
position:sticky 粘性定位
1.什么是粘性定位? 粘性定位它基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换. 它的行为就像 p ...
position:sticky粘性定位的几种巧妙应用与理解。
一.粘性布局的定义 position:sticky又称为粘性定位,是css3新增的.粘性定位的元素依赖于用户的滚动,在相对定位(relative)与固定定位(fixed)之间进行切换,基于位偏移的值进 ...
CSS position: sticky; 粘性定位初识
之前所熟知的CSS position 属性值有relative.absolute.fixed,当然也不能忽略了static(默认)和inherit(继承). 偶然的一次在 MDN:https://d ...
定位、CSS3的动画
一.网页定位 1.网页定位:大多数情况下,跟已有元素不相干,在某种情况下,会脱离标准文档流. 2.position属性 static:默认值,静态的,没有定位,标准文档流布局. relative:相对 ...
css transition兼容性,CSS3 Transition详解和使用
Transition 简介 Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性. transition-property 用于指定应用过渡属性的名称 transition-dur ...
html中2d变形兼容性,CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
HTMLCSS案例—咖啡店（定位+布局+CSS3）
HTML&CSS案例-咖啡店该案例是从最终效果到实现的过程一,分析页面布局二,做整体布局 1. 创建一个站点文件夹,再加上子文件夹 2. 先初步输入代码,4部分4< div > ...

Sticky 黏性定位兼容性css3

Sticky 黏性定位兼容性css3相关推荐

最新文章

热门文章

Sticky 黏性定位 兼容性css3

Sticky 黏性定位 兼容性css3相关推荐

最新文章

热门文章

Sticky 黏性定位兼容性css3

Sticky 黏性定位兼容性css3相关推荐