CSS中定位模型有哪些？
- 零下一度原創
- 2017-06-24 14:00:371261瀏覽
定位模型2017年6月8日fanbright
#css支援6種定位模型
絕對
固定
對相對
浮動
相對浮動
設定位置
position:static;可以取消元素的定位設定,使之恢復為原先在常規流中的顯示方式.static是預設值.
position:relative;可以使元素相對於常規流的位置偏移一定距離.
position:absolute;可以使元素相對於常規流的位置或最近定位祖先元素的位置偏移一定的距離.
position:fixed;可以使元素相對於視窗偏移一定的距離.
z-index可以設定元素的堆疊順序,數值越大,元素越靠上.
最近定位祖先元素
如果設定位置的元素沒有定位祖先元素,那麼
<body>就成為定位祖先元素,換言之,<body>是預設設定位置元素.最近定位元素必須是有效的祖先元素(relative|absolute|fixed ),css不支援相對於文件中任意元素進行定位的方法.
-
position:relative;是一個非常好的創建定位祖先元素的方法,因為它不會離開常規流.使用這種方法,能夠創建出既保持常規流又實現絕對定位的佈局.
原子顯示設定了位置的元素是
原子顯示的,這意味著它的靜態後代元素,行內內容和背景之間不可能出現外部元素.通過使用相對定位,絕對定位和固定定位模式,就可以將元素設定為原子顯示,設定為overflow:scroll|auto的區塊級元素也是原子顯示的
而沒設定位置的靜態區塊級,當發生重疊時,他們的行內內容不會重疊,但是他們的邊框和背景會發生重疊,但文字不會.
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>
絕對定位居中,一般元素來定位
絕對定位居中,靜態行內元素對於靜態行內元素,如em,strong,span等,但是不包括行內可替換元素(input,img, textarea等),使用絕對定位模式absolute時,width和right可以使用為了要居中,需要額外的加上div{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; /*left:0;*/ 这两条没用,没有影响 /*right:0;*/ }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中定位模型有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！