CSS的六種定位模型

時間 2019-12-08

標籤 css 定位模型欄目 CSS 简体版

原文原文鏈接

定位模型 2017年6月8日 fanbright

css支持6種定位模型css

靜態
絕對
固定
相對
浮動
相對浮動

設定位置

position:static;能夠取消元素的定位設置,使之恢復爲原先在常規流中的顯示方式.static是默認值.html
position:relative;可使元素相對於常規流的位置偏移必定距離.瀏覽器
position:absolute;可使元素相對於常規流的位置或最近定位祖先元素的位置偏移必定的距離.佈局
position:fixed;可使元素相對於窗口偏移必定的距離.spa
z-index能夠設置元素的堆疊順序,數值越大,元素越靠上.code

`最近定位祖先元素`

若是設定位置的元素沒有定位祖先元素,那麼<body>就成爲定位祖先元素,換言之,<body>是默認設定位置元素.
最近定位元素必須是有效的祖先元素(relative|absolute|fixed),css不支持相對於文檔中任意元素進行定位的方法.
position:relative;是一個很是好的建立定位祖先元素的方法,由於它不會離開常規流.使用這種方法,可以建立出既保持常規流又實現絕對定位的佈局.

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

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

`z-index`

適用於全部元素,默認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纔會生效