CSS元素之position 定位

2022-08-18 18:00:18 字數 1746 閱讀 6580

屬性inhert

規定應該從父元素繼承 position 屬性的值。

static

預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

relative

生成相對定位的元素,相對於元素本身正常位置進行定位。因此,"left:20" 會向元素的 left 位置新增 20 畫素。

absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個祖先元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed

生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

css有三種基本的定位機制:普通流,浮動和絕對定位

普通流是預設定位方式,在普通流中元素框的位置由元素在html中的位置決定,元素position屬性為static或繼承來的static時就會按照普通流定位,這也是我們最常見的方式。

相對定位比較簡單,對應position屬性的relative值,如果對乙個元素進行相對定位,它將出現在他所在的位置上,然後可以通過設定垂直或水平位置,讓這個元素相對於它自己移動,在使用相對定位時,無論元素是否移動,元素在文件流中佔據原來空間,只是表現會改變。

普通流:

相對定位:

上面例子可以看出,對綠色div進行相對定位,分別右移,下移20px後第二個紅色div位置並沒有相應變化,而是在原位置,綠色div遮擋住了部分紅色div。

相對定位可以看作特殊的普通流定位,元素位置是相對於他在普通流中位置發生變化,而絕對定位使元素的位置與文件流無關,也不佔據文件流空間,普通流中的元素布局就像絕對定位元素不存在一樣。

絕對定位的元素的位置是相對於距離他最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素,那麼他的位置就相對於初始包含塊兒(body或html神馬的)元素。

因為絕對定位與文件流無關,所以絕對定位的元素可以覆蓋頁面上的其他元素,可以通過z-index屬性控制疊放順序,z-index越高,元素位置越靠上。

還是剛才的例子,稍微改動一下,讓綠色div絕對定位,為了清晰顯示,第二個紅色div改為黃色。

這時可以看出,綠色div是相對于父元素,也就是綠框div進行的移位,而紅色和黃色div進行布局時就像綠色div不存在一樣。

固定定位:

可見hongse和黃色div布局沒有受到綠色div影響,而無論是頁面縱向滾動條在頁面頂端還是底端,綠色div總是在視口左下角

CSS之Position相對定位和絕對定位

absolute的英文意思是絕對的意思,實際上是針對父級元素元素定位,如果父級元素沒有position relative absolute,則追至再上乙個父級元素,直至相對於文件的左上角定位,按照我們中國人的理解觀念,這個其實是相對定位,是脫離文件流的。用了abolute屬性,原有float屬性將失...

css中元素的定位 position

網頁中元素的定位使用position屬性。position的可用值有 預設值。沒有定位,元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 left top right 以及 bottom ...

CSS 屬性之 position講解

postion 屬性定義了乙個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值 position static position inherit position relative position absolute position fixed 依次講解這5個值的應用。position...