定位屬性position,相對定位,絕對定位

2022-08-18 21:18:17 字數 890 閱讀 1746

在css中關於定位的內容是:

position:relative | absolute | static | fixed

• static 自動定位,自動定位就是元素在頁面普通文件流中由html自動定位,普通文件裡中的元素也稱為流動元素。不能通過z-index進行層次分級。

• relative 相對定位,相對定位不脫離文件流,參考其在原來文件流中的位置,通過 top,bottom,left,right 定位,並且可以通過z-index進行層次分級。

• absolute 絕對定位,絕對定位脫離文件流,依據最近的已經定位(絕對、相對或固定定位)的父元素,通過 top,bottom,left,right 定位。當父級 position 為 static 時,absolute元素將依據body根元素(瀏覽器視窗)進行定 位,可以通過z-index進行層次分級。

• fixed 固定定位,固定定位與父元素無關(無論父元素是否定位),直接根據瀏覽器視窗定位,且不隨滾動條拖動 頁面而滾動,可通過z-index進行層次分級。

我是box1 position: fixed; 相對於瀏覽器發生移動45

我是box2-1 position: absolute; 如果父級就是自身 相對於body左上角作為參考定位發生移動

6我是box2-278

我是box3

9我是box4 position: relative; 相對於自身的位置發生移動

position 的相關屬性(絕對定位 相對定位)

是更具最近的定位父級進行定位的,如果沒有確定定位父級,就以瀏覽器視窗進行定位。比如 position absolute left 20px top 80px 這個容器始終位於距離瀏覽器左20px,距離瀏覽器上80px的這個位置。未設定 left top right bottom 的時候,元素還在自己...

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

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

position定位屬性

position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素,則參照body進行定位 relative 相對定位 相對於原位置的定位,仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,...