css支持6種定位模型

靜態

絕對

固定

相對

浮動

相對浮動

position:html' target='_blank'>static;可以取消元素的定位設置,使之恢復為原先在常規流中的顯示方式.static是默認值.

position:relative;可以使元素相對于常規流的位置偏移一定距離.

position:absolute;可以使元素相對于常規流的位置或最近定位祖先元素的位置偏移一定的距離.

position:fixed;可以使元素相對于窗口偏移一定的距離.

z-index可以設置元素的堆疊順序,數值越大,元素越靠上.

如果設定位置的元素沒有定位祖先元素,那么 body 就成為定位祖先元素,換言之, body 是默認設定位置元素.

最近定位元素必須是有效的祖先元素(relative|absolute|fixed),css不支持相對于文檔中任意元素進行定位的方法.

設定了位置的元素是原子顯示的,這意味著它的靜態后代元素,行內內容和背景之間不可能出現外部元素.通過使用相對定位,絕對定位和固定定位模式,就可以將元素設置為原子顯示,設置為overflow:scroll|auto的塊級元素也是原子顯示的

而沒設定位置的靜態塊級,當發生重疊時,他們的行內內容不會重疊,但是他們的邊框和背景會發生重疊,但文字不會.

適用于所有元素,默認auto

z-index不是全局屬性,而是相對于設置了數字值z-index的最近定位祖先元素而定.根元素html會創建根堆疊上下文.每一個指定數字值z-index的設定位置元素都會創建一個本地的局部的堆疊上下文.

靜態定位元素按照文檔出現順序從后往前進行堆疊.

設定位置元素忽略文檔元素出現順序,而是根據z-index值由小到大的順序從后往前堆疊.負值的設定位置元素位于靜態定位元素和非設定位置浮動元素之下

position:static;默認是static;

靜態元素的開始位置由前一個靜態元素的位置確定.靜態元素的尺寸,內邊距,邊框,和外邊距決定了下一個元素的開始位置.

相鄰元素的垂直外邊距會合并在一起,最終的外邊距是兩個相鄰元素外邊距的較大值

將左右外邊距設置為auto,可以使已設定尺寸的靜態塊級元素居中顯示.

position:absolute;

百分數是相對于最近定位祖先元素的尺寸而言,而非父元素的尺寸.

將元素的left,right,top,bottom,設置為auto,可以使它恢復原先在常規流中的位置.

與浮動元素不同,絕對元素不會自動排列.不會受其他元素影響,也不會影響別的元素.

如果一個元素的所有子元素都設置為絕對定位,那么它的高度會變為0,所有它的子元素都離開了常規流.

如果不存在定位祖先元素,會根據 body 來定位

 div{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; /*left:0;*/ 這兩條沒用,沒有影響 /*right:0;*/}

對于靜態行內元素,如em,strong,span等,但是不包括行內可替換元素(input,img,textarea等),使用絕對定位模式absolute時,width和right可以使用為了要居中,需要額外的加上left:0;和right:0;使margin:0 auto;可以正常的生效.
注意,這里left和right必須是0才行.

 #em{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; left:0; right:0;}

position:fixed;可以將任意元素變為固定位置元素

切記:固定定位的元素位置是相對于窗口而定,而非相對于最近定位祖先`,而且元素不會隨頁面滾動而滾動.

因為它是相對頁面來定位,所以不需要最近定位祖先

設置時最好以top,left來進行偏移定位,當同時設置top,left,bottom,right時,會優先使用top和left的值,只有當top和left不存在時,bottom和right才會生效

position:relative;

使用left和top來改變元素位置,left和top默認是auto,auto會使相對定位元素保持在常規流中原有位置.

任何元素都可以設置position:relative;從而其絕對定位的后代元素都可以相對于它進行定位.

使用float:left;和float:right;可以使元素離開常規流.

使用float:none;默認是none,可以覆蓋元素的其他浮動規則,也可以避免繼承浮動

浮動元素不會影響塊級框的位置,而只影響行內元素

clear:left;clear:right;clear;both;

任意元素都可以設置為浮動元素,clear適用于表格,塊級元素和浮動元素

clear 不適用于行內,絕對定位或固定定位的元素

使用float可以使一些元素成為浮動元素,通過relative可以浮動元素設置為相對定位,相對浮動元素仍然位于浮動元素所在的常規流中,可以使用left和top設置它在流中的偏移位置.

只有positon:relative;和position:static;適用于浮動元素.而設定為absolute和fixed時,顯示結果是不確定的.

在css中,如果參數值是0的話,不要加單位,

瀏覽器在渲染一個元素內容之前,會先渲染它的框,順序是從背景顏色開始,然后是背景圖片,接著是邊框,最后,瀏覽器會在框之上渲染框的內容

以上就是CSS中定位模型有哪些？的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。