css定位:相對定位、絕對定位、固定定位的區別與特性
原文地址:http://www.qingzhouquanzi.com/106.html
css定位常用的有以下三種：
使用了定位的共同特性:
這三種定位可以設置四個值,但是通常只用到2個值就可以完成定位
如果只寫了定位 沒有設置偏移量,則元素位置都不會改變,默認值為原來的位置.
使用了定位,.元素會提升一個層級(如果與別的元素發生重疊,會在別的元素上面)
如果多個元素同時開啟了定位.層級都一樣的情況下.如果發生重疊.則后面的元素會蓋住前面的元素
如果想調整層級 可以使用z-index:來調整層級,
需要注意的是
1.沒有開啟定位的元素不可以使用z-index屬性
2.父元素的層級再高,也不會蓋住子元素
相對定位(相對於元素原來的位置偏移)
position:relative; left: top:
絕對定位(相對於祖元素 偏移)
position:absolute; left: top:
固定定位(相對於瀏覽器窗口偏移)
position:fixed; left: top:
相對定位的特點:
1.相對定位的元素不會脫離文檔流(所以元素在文檔流中的特征他都包含)
2.相對定位元素會提升一個層級(如果與其他元素發生重疊 它會在上面)
3.相對定位不會改變元素的性質(塊元素仍然是塊元素,行內元素仍然是行內元素)
4.相對定位.但是不設置任何偏移值,.元素則不會有任何變化
絕對定位的特點:
1.絕對定位如果不設定任何偏移值,元素位置不會有任何改變(后面的就不一定了)
2.絕對定位會使得元素脫離文檔流
3.絕對定位是相對於離他最近的開啟了定位的元素進行定位的,如果都沒有,則相對於body進行定位(所以通常給父元素也加一個定位)
4.絕對定位也會使得元素提升一個層級
5.絕對定位會改變元素的性質.行內元素會變成塊狀元素(因為會脫離文檔流,也就是脫離文檔流的特性)
固定定位:
固定定位也是絕對定位的一種.擁有絕對定位的大部分特點
但是他是相對於瀏覽器窗口的位置進行定位.比如漂浮的客服,回到頂部.這類的按鈕都是使用的固定定位