相對定位
- 設置相對定位
給元素設置 position: relative 即可實現相對定位。
可以使用 left、right、top 、 bottom 四個屬性調整位置。
- 相對定位的參考點是相對自己原來的位置
- 相對定位的特點：
1．不會脫離文檔流，元素位置的變化，只是視覺效果上的變化，不會對其他元素產生任何影響。
2．定位元素的顯示層級比普通元素高，無論什么定位，顯示層級都是一樣的。
定位的元素會蓋在普通元素之上。
都發生定位的兩個元素，后寫的元素會蓋在先寫的元素之上。
left不能和right一起設置，top和bottom不能一起設置。
絕對定位
- 設置絕對定位
給元素設置 position: absolute 即可實現絕對定位。
可以使用 left、 right、 top、 bottom
- 絕對定位的參考點是參考它的包含塊。
包含塊：
1．對于沒有脫離文檔流的元素：包含塊就是父元素；
2．對于脫離文檔流的元素：包含塊是第一個擁有定位屬性的祖先元素（如果所有祖先都沒定位，那包含塊就是整個頁面）。
- 絕對定位元素的特點：
1．脫離文檔流，會對后面的兄弟元素、父元素有影響。
2.left不能和right一起設置，top和bottom不能一起設置。
3．絕對定位、浮動不能同時設置，如果同時設置，浮動失效，以定位為主。
4．無論是什么元素（行內、行內塊、塊級）設置為絕對定位之后，都變成了定位元素。
舉例：
<style>.outer {width: 500px;background-color: skyblue;border: 1px solid black;padding: 20px;position: relative;}.box {width: 200px;height: 200px;font-size: 20px;}.box1 {background-color: #888;}.box2 {background-color: orange;position: absolute;top: 220px;left: 20px;}</style>
固定定位
- 設置固定定位：
給元素設置 position: fixed 即可實現固定定位。
可以使用 left、right 、 top 、 bottom四個屬性調整位置。
- 固定定位的參考點：參考它的視口
- 固定定位元素的特點
1．脫離文檔流，會對后面的兄弟元素、父元素有影響。
2.left 不能和right一起設置，top和bottom不能一起設置。
3．固定定位和浮動不能同時設置，如果同時設置，浮動失效，以固定定位為主。
4．無論是什么元素（行內、行內塊、塊級）設置為固定定位之后，都變成了定位元素。
舉例：
.box2 {background-color: orange;position: fixed;bottom: 0;right: 0;}
粘性定位
- 設置粘性定位
給元素設置 position:sticky 即可實現粘性定位。
可以使用 left、 right、 top、 bottom 四個屬性調整位置，不過最常用的是top值。
- 粘性定位的參考點：離它最近的一個擁有"滾動機制"的祖先元素，即便這個祖先不是最近的真實可滾動祖先。
- 粘性定位元素的特點
1.不會脫離文檔流，它是一種專門用于窗口滾動時的新的定位方式。
2.粘性定位和相對定位的特點基本一致，不同的是：粘性定位可以在元素到達某個位置時將其固定。
舉例：
.nav {background-color: skyblue;font-size: 40px;position: sticky;top: 0px;}
定位層級
1．定位元素的顯示層級比普通元素高，無論什么定位，顯示層級都是一樣的。
2．如果位置發生重疊，默認情況是：后面的元素，會顯示在前面元素之上。
3．可以通過css屬性 z-index調整元素的顯示層級。
4. z-index 的屬性值是數字，沒有單位，值越大顯示層級越高。
5．只有定位的元素設置 z-index 才有效。
6．如果z-index值大的元素，依然沒有覆蓋掉z-index值小的元素，那么請檢查其包含塊的層級。
)
)
