H5學習筆記(十)定位

定位

定位指的就是將指定的元素擺放到頁面的任意位置

通過定位可以任意的擺放元素
通過position屬性來設置元素的定位

可選值
static:默認值,元素沒有開啓定位
relative:開啓元素的相對定位
absolute:開啓元素的絕對定位
fixed:開啓元素的固定定位(也是絕對定位的一種)

 

相對定位

當元素的position屬性設置爲relative時,則開啓了元素的相對定位
1.當開啓了元素的相對定位以後,而不設置偏移量時,元素不會發生任何變化
2.相對定位是相對於元素在文檔流中原來的位置進行定位
3.相對定位的元素不會脫離文檔流
4.相對定位會使元素提升一個層級
5.相對定位不會改變元素的性質,塊還是塊,內聯還是內聯

當開啓了元素的定位(position屬性值是一個非static的值)時,可以通過left right top bottom四個屬性來設置元素的偏移量

  • left:元素相對於其定位位置的左側偏移量
  • right:元素相對於其定位位置的右側偏移量
  • top:元素相對於其定位位置的上邊的偏移量
  • bottom:元素相對於其定位位置下邊的偏移量

通常偏移量只需要使用兩個就可以對一個元素進行定位,一般選擇水平方向的一個偏移量和垂直方向的偏移量來爲一個元素進行定位

.box{
    position: relative;
    left: 100px;
    top: 200px;
}

 

絕對定位

當position屬性值設置爲absolute時,則開啓了元素的絕對定位
1.開啓絕對定位,會使元素脫離文檔流
2.開啓絕對定位以後,如果不設置偏移量,則元素的位置不會發生變化
3.絕對定位是相對於離他最近的開啓了定位的祖先元素進行定位的(一般情況,開啓了子元素的絕對定位都會同時開啓父元素的相對定位)
如果所有的祖先元素都沒有開啓定位,則會相對於瀏覽器窗口進行定位
4.絕對定位會使元素提升一個層級
5.絕對定位會改變元素的性質,內聯元素變成塊元素,塊元素的寬度和高度默認都被內容撐開

.box{
    position: absolute;
}

 

固定定位

當元素的position屬性設置fixed時,則開啓了元素的固定定位
固定定位也是一種絕對定位,它的大部分特點都和絕對定位一樣不同的是:

  • 固定定位永遠都會相對於瀏覽器窗口進行定位
  • 固定定位會固定在瀏覽器窗口某個位置,不會隨滾動條滾動

IE6不支持固定定位

.box{
    position: fixed;
}

 

層級

如果定位元素的層級是一樣,則下邊的元素會蓋住上邊的

  • 通過z-index屬性可以用來設置元素的層級
  • 可以爲z-index指定一個正整數作爲值,該值將會作爲當前元素的層級
  • 層級越高,越優先顯示
  • 對於沒有開啓定位的元素不能使用z-index
  • 父元素的層級再高,也不會蓋住子元素
.box{
    z-index: 25;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章