CSS定位的一些解釋

2021-06-29 16:28:48 字數 3079 閱讀 4799

定位:

position:static | relative | absolute  | fixed

預設值:static

top | right | bottom | left 

初始值為:auto

百分數:對於top和bottom,相對於包含塊的高度;對於left和right,相對於包含塊的寬度

正值使邊界向內偏移,

負值會導致向外偏移。

定義

static:元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,行內元素則會建立乙個或者多個行框,置於其父元素中。

relative:元素框

偏移某個距離。元素仍保持其

未定位前的形狀,它原本

所佔的空間仍保留

absolute:元素框從文件流完全刪除,並相對於包含塊定位。元素原先在文件流中

所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。

fixed:元素框的表現類似於absolute,不過其

包含塊是視窗本身。

具體解釋

1、首先需要解釋的是文件流

官方的解釋是

the flow of an element a is the set 

consisting of a and all in-flow elements

whose nearest out-of-flow ancestor is a。這裡有三點:

(1)、a元素的文件流是乙個集合(同時也暗含著:文件流是相對於乙個元素a來說的)

(2)、這個集合包括了a和以及一些a文件流之類的元素

(3)、並且這些元素的文件流之外最近的祖先就是a(這個意思是說,這些元素的文件流之外的最近的祖先若不是a,那麼這些元素就不屬於a文件流)

//自己的理解

以下用圖來說明:

灰色部分是html文件中的其他部分,a為文件中的乙個元素

(1)、a的文件流是乙個集合。

(2)、集合中包含a元素和b元素

(3)、但是不包括c元素,因為c元素的最近乙個c文件流外的祖先不是a,而是b。

同時文件流有三種:

普通流,浮動流,絕對定位流。如果乙個元素的文件流是

浮動流或者絕對定位流,那麼他就會脫離

父元素的文件流,而不管父元素是什麼型別的文件流。(自己理解得到的,非概念) 2、

偏移某個距離,未定位前的形狀,所佔的空間仍保留:

當position:relative的時候

(1)元素偏移某個距離,是說它會相對於它本身所在的父元素文件流中的位置

偏移某個距離,而不論父元素是什麼型別的文件流(

因為包含塊不需要是定位元素,看下文)。

(2)定位前它是塊元素或者是內聯元素,定位後都不變。

(3)他在父元素文件流中所佔的空間仍保留,意思是說及時它相對原來位置偏移了,但是在它的原來位置還有它的形狀作為

佔位符,並且它在文件流中的佔的位置大小,也會隨著它大小的變化而變化。

3、包含塊

(1)根元素的包含塊也稱為

初始包含塊,是乙個視窗大小的矩形。

(2)對於非根元素,若position是relative或static,其包含塊有最近的塊級框、表單元格、行內快祖先元素的

內容邊界組成。

(3)absolute的包含塊設定為position值不是static的祖先元素(可以是任何型別)。

-------如果祖先是塊級元素,包含塊則設定為該元素的

內邊距邊界,即邊框界定的區域

-------若是行內元素,包含塊設定為該元素的內容邊界

-------若沒有祖先,元素的包含塊定義為初始包含塊。 4、

元素框從

文件流 完全刪除,

所佔的空間會關閉

,定位後生成乙個塊級框

(1)與relative不同,absolute定位後它的空間會關閉,完全脫離文件流,意思是說當元素成為

絕對定位元素類文件流的時候,它就不再是任何元素

文件流中的一部分了,原來包含它的文件流的「內容」會減小(若文件流中有背景顏色就會容易發現),但它還是會相對

包含塊定位,縱然它已經不是

包含塊文件流的一部分。

(2)定位後,無論原來是行內框,還是塊級框,都一律變為塊級框。

關於css定位的一些理解

static 預設值。無特殊定位,物件遵循html定位規則 absolute 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z index屬性定義 fixed ...

關於CSS定位的一些總結

所有主流瀏覽器都支援 position 屬性。position屬性規定元素的定位型別,影響元素框生成的方式。值描述 absolute 生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位,如果不存在這樣的父元素,則依據最初的包含快。根據使用者 的不同,最初的包含塊可能是畫布或 h...

關於css定位的一些自我總結

在瀏覽 時 我們經常會看到一些 文字在上面 導航欄一直在頁面的最上面之類的 css定位position允許你對元素進行定位 它常用的屬性值一般為5個分別為 static 預設值 設定該屬性是元素會正常顯示 不會識別 left right top bottom指定的座標 absolute 絕對定位,相...