首頁 > 開發者 > CSS

CSS中絕對位置absolute和相對定位relative詳解

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
一、position文法與結構
position文法：
position : static absolute relative
position參數：
static : 　無特殊定位，對象遵循HTML定位規則
absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對位置。而其層疊通過css z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框
relative : 　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中位移位置
position說明：
設定對象的定位方式，可以讓布局層容易位置絕對位置，控制盒子物件更加準確。
二、position實際用處
絕對位置position用於定位盒子物件，有時一個布局中幾個小對象，不易用css padding、css margin進行相對定位，這個時候我們就可以使用絕對位置來輕鬆搞定。特別是一個盒子裡幾個小盒子不規律的布局，這個時候我們使用position絕對位置非常方便布局對象。
絕對位置position示範適用圖、不規律布局，為即可利用position:absolute；position:relative進行絕對位置
絕對位置與float浮動不能同時使用，比如一個大盒子裡有的是絕對位置，有的是使用css float浮動定位，這樣IE6瀏覽器將不會顯示改大對象裡的這些絕對位置與相對定位，這也算是IE6 CSS HACK吧，注意不要混用即可。
三、絕對位置使用條件
position:absolute；position:relative絕對位置使用通常是父級定義position:relative定位，子級定義position:absolute絕對位置屬性，並且子級使用left或right和top或bottom進行絕對位置。
.divcss5{position:relative} 定義，通常最好再定義CSS寬度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 這裡定義了距離父級左側距離間距為10px，距離父級上邊距離為10px
或
.divcss5-a{position:absolute;right:10px;bottom:10px} 這裡定義了距離父級靠右距離10px,距離父級靠下邊距離為10px
對應HTML結構
 代碼如下 複製代碼
<div class=”divcss5″>
<div class=”divcss5-a”></div>
</div>
這樣就絕對位置了“divcss5-a”在父級“divcss5”盒子內。
注意的是，left（左）和right（右）在一個對象只能選一種定義，bottom（下）和top（上）也是在一個對象只能選一種定義。
四、position應用案例
這裡DIVCSS5為大家執行個體應用position絕對位置，我們設定一個最外層盒子css邊框為紅色，css width為400px,css height為200px,內部包含了2個盒子，為就用絕對位置這2個盒子，第一個盒子CSS命名為“divcss5-a”,其寬度為100px,背景顏色為黑色，高度為100px,定位距離父級上為10px，距離左為10px;第二個盒子CSS類命名為“divcss5-b”，其寬度和高度分別為 50px,css背景顏色為藍色，距離父級下距離為13px,距離父級右邊為15px。
 代碼如下 複製代碼
<style>
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* 定義父級position:relative 為就認為是絕對位置聲明吧 */
.divcss5-a{ position:absolute;width:100px;height:100px;
left:10px;top:10px;background:#000}
/* 使用絕對位置position:absolute樣式 並且使用left top進行定位位置 */
.divcss5-b{ position:absolute;width:50px;height:50px;
right:15px;bottom:13px;background:#00F}
/* 使用絕對位置position:absolute樣式 並且使用right bottom進行定位位置 */
</style>
html程式碼片段
 代碼如下 複製代碼
<div class=”divcss5″>
<div class=”divcss5-a”></div>
<div class=”divcss5-b”></div>
</div>
五、css絕對位置總結
通常我們使用position:absolute；position:relative進行絕對位置布局，通過CSS進行定義定位，DIV布局 HTML，注意什麼地方使用position:relative，什麼地方使用position:absolute進行定位，同時不要忘記使用left、 right、top、bottom的配合定位具體位置。絕對位置如果父級不使用position:relative，而直接使用 position:absolute絕對位置，這個時候將會以body標籤為父級，使用position:absolute定義對象無論位於DIV多少層結構，都將會被拖出以<body>為父級（參考級）進行絕對位置。絕對位置非常好用，但切記不要濫用，什麼地方都用，這樣有時會懶得計算距離上、下、左、右間距，同時可能會造成CSS代碼臃腫，更加經驗適當使用，用於該使用地方。
在絕對位置時候我們可以使用css z-index定義css層重疊順序。
同時left、right、bottom、top的數值，可以使用（Photoshop）PS切片工具擷取準確的數值。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
what absolute path and relative path time relative root relative relative directory relative xpath relative date relative function
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More