css定位

浮動可以讓多個塊級赫茲一行沒有縫隙排列顯示,經常用于橫向排列盒子

定位可以讓盒子自由地在某個盒子內移動位置或者固定屏幕中某個位置,并且可以壓住其他盒子

(資料圖片僅供參考)

定位:將盒子定在某一個位置,所以定位也是在擺放盒子

定位=定位模式+邊偏移

定位模式用于指定一個元素在文檔中的定位方式,邊偏移決定該元素的最終位置

邊偏移有top/bottom/left/right四個屬性

相對定位

相對定位:元素在移動位置的時候,是相對于它原來的位置來說的(自戀型)

相對于自己原來的位置移動(移動位置的時候參考點是自己原來的位置)

原來在標準流的位置繼續占有,后面的盒子仍然以標準流的方式對待他(不脫標,繼續保留原來位置)

絕對定位

絕對定位:元素在移動位置的時候是相對于它的祖先元素來說的

如果沒有祖先元素或祖先元素沒有定位,則以瀏覽器為準定位

如果祖先元素有定位(相對/絕對/固定),則以最近一級有定位的祖先元素為參考點移動位置(父親沒有看爺爺的)

絕對定位不在占有原先的位置(脫標)

子絕父相

子級絕對定位,不會占有位置,可以放到父盒子里面任何一個地方,不會影響其他的兄弟盒子

父盒子需要加定位限制子盒子在父盒子內顯示

父盒子布局時,需要占有位置,因此父親只能是相對定位

總結:因為父級需要占有位置,因此是相對定位,子盒子不需要占有位置,則是絕對定位

固定定位

以瀏覽器的可視窗口為參照點移動元素,跟父元素沒有任何關系

不隨滾動條滾動

不再占有原先位置

讓固定定位在版心右側

讓固定定位的盒子left=50%,走到瀏覽器可視區一半位置

讓固定定位的盒子margin-left=版心寬度的一半距離

就可以讓固定定位的盒子貼著版心右側對齊了

定位的疊放順序z-index

在使用定位布局時可能出現盒子重疊的情況,可使用z-index控制盒子的前后次序

數值可以是正整數,負指數或0,默認為auto,數值越大盒子越靠上

如果屬性值相同則按照書寫順序,后來居上

數字后面不能加單位

只有定位的盒子才有z-index屬性,標準流和浮動沒有

絕對定位和盒子居中

加了絕對定位的盒子不能通過margin:0 auto水平居中,但是可以通過以下方法實現水平和垂直居中

left: 50%讓盒子的左側移到父級元素的水平中心位置

margin-left:-100px讓黑向左移動自身寬度的一半

定位的拓展

脫標的盒子不會觸發外邊距塌陷浮動元素/絕對定位/固定定位 的元素都不會觸發外邊距合并的問題

浮動的元素不會壓住下面標準流的文字(圖片),只會壓住下面標準流的盒子但是絕對定位/固定定位會壓住下面標準流所有的內容

網頁布局總結

標準流:可以讓盒子上下排列或者左右排列,垂直的塊級赫茲顯示就用標準流布局

浮動:可以讓多個塊級元素一行顯示或者左右對齊盒子,多個塊級盒子水平顯示就用浮動布局

定位:最大的特點就是有層疊的概念,可以讓多個盒子前后疊壓來顯示,如果元素自由在某個盒子內移動就用定位布局

關鍵詞：

責任編輯：Rex_12