CSS中定位模型有哪些？
定位模型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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
