css中的position屬性值的探究
css的position屬性指定了元素的定位型別,然後通過top,botton,left,right來具體定位。
在具體定位之前必須使用position屬性,否則所有的具體定位屬性都無法生效。
position可選擇的值一共五個:static ,relative,absolute,fixed,或sticky。
下面博主將一一進行含程式碼和執行結果的對比解釋
首先是不設定position屬性,可以看到two元素的top的屬性並未生效,而顏色屬性是有效的,當前位置是預設文件流中的位置,以此為原型對比position改變時的元素位置的變化。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./j.css"> </head> <body> <div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div> </div> </body> </html>
.box { display: inline-block; background: red; color: white; } #two { top: 260px; bottom: 126px; left: 20px; background: blue; }
position:static
在#two的類下新增position:static;如下(後面每處只修改position的值)
#two { position:static; top: 260px; bottom: 126px; left: 20px; background: blue; }
HTML元素的預設值,即沒有定位,元素出現在正常的流中。
靜態定位的元素不會受到 top, bottom, left, right影響。
這個值既然會使定位屬性失效,那麼它存在的意義是什麼的?
在網頁樣式修改的過程中,可以暫時的遮蔽某些元素的位置資訊,或者在修改的時候,保留,某些部分的位置資訊,便於恢復。
position:relative
相對定位,相對與原來正常文件流的位置定位,但是在定位時不改變原來的頁面佈局,既是相當於只是把定位的元素進行了移動,而移動的對比標準位置就是正常文件流中的位置,而原來的位置會留白。
position :absolute
絕對定位,該元素將從普通文件流中刪除,並且不會為頁面佈局中的元素建立空間。他相對於最近已定位的父元素定位。例子中即是根據body元素來定位的。
position :fixed
固定定位,所謂固定定位和絕對定位相似,一樣都會從普通文件流中刪除,並且不會為頁面佈局中的元素建立空間;不一樣的是它是固定在視窗上的,是以視窗為定位物件的的,相信大家瀏覽很多網頁時都有這樣的感受,網頁上部或者下部會有廣告不會隨著網頁的上下滾動而移動,它們是固定在網頁上的,並且如果沒有設定z-index來修該疊放次序,它們會覆蓋網頁的內容。
position :sticky
該元素並不脫離文件流,仍然保留元素原本在文件流中的位置。
當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。亦即如果你設定了top: 20px,那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定,不再向上移動。
元素固定的相對偏移是相對於離它最近的具有滾動框的父元素,如果父元素都不可以滾動,那麼是相對於viewport來計算元素的偏移量