小談CSS定位

2022-01-20 04:24:02 字數 1569 閱讀 9760

position 屬性規定元素的定位型別。

這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成乙個塊級框,而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。值描述

absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed

生成絕對定位的元素,相對於瀏覽器視窗進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative

生成相對定位的元素,相對於其正常位置進行定位。

因此,"left:20" 會向元素的 left 位置新增 20 畫素。

static

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

inherit

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

以上內容摘自w3c   

自己的理解:

乙個元素在預設情況下是沒有定位的,即所說的static屬性,

div1

div2

正常情況下div1 和div2都是預設定位,所以他們在屬於文件流,也有說是標準流的,此時div1和div2是佔空間的,div2之所以在div1的下面,就是因為div1 屬於標準流,有自己的空間,其他元素無法佔據其位置,只能挨著排放。

此時改變div1的position屬性為absolute,效果如下

div1

div2

從上邊的例子可以清楚的看到div2 佔據了div1的位置,並沒有在div1的下面排放,這是為什麼呢?

當position:absolute 時,此時div1 已經不再屬於文件流(脫離了文件流),也就是說div1 不佔據任何空間,好比div1 浮起來了,導致div2占去它的空間。

此時改變div1的position屬性為relative,效果如下

div1

div1 position: relative

div2

從上邊的例子可以清楚的看到div2並沒有 佔據了div1的位置,而是在div1的下面排放,這是為什麼呢?

當position:relative 時,表示div1 此時是相對定位,相對誰呢?相對自己,就是上圖的紅色邊框div相對自己以前的位置(紅色虛線框)進行定位,此時div1屬於文件流,是佔據空間的,還是虛線框所佔的空間。所有div2無法上移。

此時改變div1的position屬性為absolute,效果如下

div1 position: fixed

div2

當positon:fixed 時 div1此時相對瀏覽器驚醒定位,同樣也脫硫了文件流,不佔據任何空間,div2 上移 佔據div1 的位置。表現為 無論怎麼拖動滾動條,div1位置相對瀏覽器始終不變。

好了,到此打住,放張美女提提神

css 定位及遮罩層小技巧

relative定位 相對它自己的正常位置的定位。fixed定位 fixed定位是指元素的位置相對於瀏覽器視窗是固定位置,即使視窗是滾動的它也不會滾動,且fixed定位使元素的位置與文件流無關,因此不佔據空間,且它會和其他元素發生重疊。absolute定位 絕對定位的元素相對於最近的已定位父元素,如...

css 定位連線 css絕對定位

定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...

CSS定位 浮動定位

css定位機制 浮動定位 float屬性 進行浮動定位 left,right clear屬性 清除浮動 left,right,both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...