position的五個(gè)屬性及特殊情況:
static
- 默認(rèn)值，沒有定位，出現(xiàn)在正常的文檔流中，忽略top，left，right，bottom，z-index的聲明，也就是如果同時(shí)設(shè)置top,margin-top,那么只有margin-top起作用
relative 常用
- 相對定位，通過top,left,right,bottom的設(shè)置，相當(dāng)于正常位置定位，可根據(jù)z-index進(jìn)行層次分級,也就是如果同時(shí)設(shè)置top,margin-top那么都起作用
absolute 常用
- 絕對定位，脫離文檔流，相對于static定位以外的第一個(gè)父元素定位，元素的位置可通過top,left,right,bottom設(shè)置，可根據(jù)z-index進(jìn)行層次分級,也就是如果同時(shí)設(shè)置top,margin-top那么都起作用
fixed
- 固定定位，相對于瀏覽器窗口進(jìn)行定位，元素的位置可通過top,left,right,bottom設(shè)置，可根據(jù)z-index進(jìn)行層次分級,也就是如果同時(shí)設(shè)置top,margin-top那么都起作用
sticky: 黏性定位
結(jié)合了相對定位(relative) 和 固定定位(fixed) 兩種定位功能于一體的特殊定位，適用于一些特殊場景,如果同時(shí)設(shè)置top,margin-top，分情況而定，下面有例子詳解
position:sticky的生效是有一定的限制的，總結(jié)如下：
-
須指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
- 并且top和bottom同時(shí)設(shè)置時(shí)，top生效的優(yōu)先級高，left和right同時(shí)設(shè)置時(shí)，left的優(yōu)先級高。
-
設(shè)定為position:sticky元素的任意父節(jié)點(diǎn)的 overflow 屬性必須是 visible，否則position:sticky不會(huì)生效。這里需要解釋一下：
如果position:sticky元素的任意父節(jié)點(diǎn)定位設(shè)置為overflow:hidden，則父容器無法進(jìn)行滾動(dòng)，所以 position:sticky元素也不會(huì)有滾動(dòng)然后固定的情況。
如果position:sticky元素的任意父節(jié)點(diǎn)定位設(shè)置為position:relative | absolute | fixed，則元素相對父元素進(jìn)行定位，而不會(huì)相對 viewprot 定位。
達(dá)到設(shè)定的閥值，就為絕對定位(fixed),否則是固定定位(relative)。也就是設(shè)定了position:sticky的元素表現(xiàn)為relative還是fixed是根據(jù)元素是否達(dá)到設(shè)定了的閾值決定的。
使用:
- 當(dāng)item元素滾動(dòng)到距離窗口top為60px時(shí)固定、
<div class="container">
<div class="item"></div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 50px;
width: 500px;
height: 10000px;
border: 1px dashed;
}
.item {
position: sticky;
top: 60px; // 一開始是relative，這里是相對于文檔定位，而不是父元素, 隨著滾動(dòng)條滾動(dòng)，當(dāng)?shù)竭_(dá)該閥值時(shí)，就相對于窗口定位
left: 50px;
width: 200px;
margin-top: 30px; // 注意點(diǎn)，沒有滾動(dòng)時(shí)，如果同時(shí)設(shè)置top和margin-top，那么誰比較大就取誰的值
height: 20px;
background-color: aqua;
}
</style>
這兒要注意一點(diǎn)，當(dāng)父元素container也設(shè)置了top值，那么item的top在這也是相對于文檔定位，但是當(dāng)item的top值小于父元素container的top時(shí)，它相對于父元素的top相當(dāng)于0，當(dāng)同時(shí)設(shè)置了margin-top時(shí)，如果沒有發(fā)生滾動(dòng)，那么margin-top 與 (item的top - 父元素container的top）比較，誰大誰就取作用,在這兒maigin-top = 30, item.top - container.top = 10, 所以item距離父元素30px，如果差值比較大，那么距離父元素就取差值，當(dāng)發(fā)生滾動(dòng)后，那么就是item的top取作用、
過程: 一開始是relative，這里是相對于文檔定位, 隨著滾動(dòng)條滾動(dòng), item會(huì)跟著移動(dòng)，當(dāng)?shù)竭_(dá)該閥值時(shí)，就相對于窗口固定定位(fixed)。
