定位:
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 絕對定位,相...