最近有點(diǎn)忘了position幾個(gè)取值的內(nèi)容，在這里簡(jiǎn)單總結(jié)一下。

　　position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和sticky，這里sticky是CSS3新發(fā)布的一個(gè)屬性。

1、position: static

　　static(沒有定位)是position的默認(rèn)值，元素處于正常的文檔流中，會(huì)忽略left、top、right、bottom和z-index屬性。

2、position: relative

　　relative(相對(duì)定位)是指給元素設(shè)置相對(duì)于原本位置的定位，元素并不脫離文檔流，因此元素原本的位置會(huì)被保留，其他的元素位置不會(huì)受到影響。

3、position: absolute

　　absolute(絕對(duì)定位)是指給元素設(shè)置絕對(duì)的定位，相對(duì)定位的對(duì)象可以分為兩種情況：

　　1) 設(shè)置了absolute的元素如果存在有祖先元素設(shè)置了position屬性為relative或者absolute，則這時(shí)元素的定位對(duì)象為此已設(shè)置position屬性的祖先元素。

　　2) 如果并沒有設(shè)置了position屬性的祖先元素，則此時(shí)相對(duì)于body進(jìn)行定位。

4、position: fixed

　　可以簡(jiǎn)單說fixed是特殊版的absolute，fixed元素總是相對(duì)于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是一個(gè)新的css3屬性，它的表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時(shí)該元素的位置并不受到定位影響（設(shè)置是top、left等屬性無效），它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置。

?????? position屬性中最有意思的就是sticky了，設(shè)置了sticky的元素，它的表現(xiàn)類似position:relative和position:fixed的合體，目標(biāo)區(qū)域在屏幕中可見時(shí)該元素的位置并不受到定位影響（設(shè)置是top、left等屬性無效），它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)根據(jù)設(shè)置的left、top等屬性成固定位置的效果。

　　可以知道sticky屬性有以下幾個(gè)特點(diǎn)：

• 該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。
• 當(dāng)元素在容器中被滾動(dòng)超過指定的偏移值時(shí)，元素在容器內(nèi)固定在指定位置。亦即如果你設(shè)置了top: 50px，那么在sticky元素到達(dá)距離相對(duì)定位的元素頂部50px的位置時(shí)固定，不再向上移動(dòng)。
• 元素固定的相對(duì)偏移是相對(duì)于離它最近的具有滾動(dòng)框的祖先元素，如果祖先元素都不可以滾動(dòng)，那么是相對(duì)于viewport來計(jì)算元素的偏移量

　　比較蛋疼的是這個(gè)屬性的兼容性還不是很好，目前仍是一個(gè)試驗(yàn)性的屬性，并不是W3C推薦的標(biāo)準(zhǔn)。它之所以會(huì)出現(xiàn)，也是因?yàn)楸O(jiān)聽scroll事件來實(shí)現(xiàn)粘性布局使瀏覽器進(jìn)入慢滾動(dòng)的模式，這與瀏覽器想要通過硬件加速來提升滾動(dòng)的體驗(yàn)是相悖的。

　　具體情況可以看下圖，基本上可以說這個(gè)屬性使用的瀏覽器只有FireFox和iOS的Safari：

　　簡(jiǎn)單的說，要讓sticky屬性生效的條件有以下兩點(diǎn)：

• 一個(gè)是元素自身在文檔流中的位置
• 另一個(gè)是該元素的父容器的邊緣

　　第一點(diǎn)上面已經(jīng)講過了，如果設(shè)置了top: 50px，那么元素在頁面滾動(dòng)超出目標(biāo)區(qū)域達(dá)到距離頂部50px時(shí)才會(huì)發(fā)生定位，否則并不會(huì)發(fā)生定位。

　　第二點(diǎn)則需要考慮父容器的高度情況：sticky元素在到達(dá)父容器的底部時(shí)，則不會(huì)再發(fā)生定位，如果父容器高度并沒有比sticky元素高，那么sticky元素一開始就達(dá)到了底部，并不會(huì)有定位的效果。

　　此外還有一點(diǎn)就是父元素的overflow屬性，如果父元素的overflow屬性并不是默認(rèn)的visible屬性，那么sticky元素則相對(duì)于該父元素定位。也就是如果要定位在頂部的話，此時(shí)這個(gè)效果就無效了。

使用sticky需要注意的問題：

1.sticky不會(huì)觸發(fā)BFC，

2.z-index無效，

3.當(dāng)父元素的height：100%時(shí)，頁面滑動(dòng)到一定高度之后sticky屬性會(huì)失效。（這個(gè)待定）

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

5.父元素高度不能低于sticky高度，必須指定top、bottom、left、right4個(gè)值之一。如果同時(shí)定義了left和right值，那么left生效，right會(huì)無效，同樣，同時(shí)定義了top和bottom，top贏。

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

?

總結(jié)

以上是生活随笔為你收集整理的Sticky 黏性定位 兼容性css3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。