CSS position絕對定位absolute relative

時間 2019-11-07

標籤 css position 絕對定位 absolute relative 欄目 CSS 简体版

原文原文鏈接

DIV CSS position絕對定位absolute relative教程篇css

經常使用position用於層的絕對定位，好比咱們讓一個層位於一個層內具體什麼位置，便可使用position:absolute和position:relative實現。html

1、position語法與結構

position語法：
position : static absolute relative

position參數：
static : 　無特殊定位，對象遵循HTML定位規則
absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊經過css z-index屬性定義。此時對象不具備邊距，但仍有補白和邊框
relative : 　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置

position說明：
設置對象的定位方式，可讓佈局層容易位置絕對定位，控制盒子對象更加準確。瀏覽器

2、position實際用處

絕對定位position用於定位盒子對象，有時一個佈局中幾個小對象，不易用css padding、css margin進行相對定位，這個時候咱們就可使用絕對定位來輕鬆搞定。特別是一個盒子裏幾個小盒子不規律的佈局，這個時候咱們使用position絕對定位很是方便佈局對象。工具

絕對定位position示範適用圖、不規律佈局，便可利用position:absolute；position:relative進行絕對定位佈局

絕對定位與float浮動不能同時使用，好比一個大盒子裏有的是絕對定位，有的是使用css float浮動定位，這樣IE6瀏覽器將不會顯示改大對象裏的這些絕對定位與相對定位，這也算是IE6 CSS HACK吧，注意不要混用便可。spa

3、絕對定位使用條件

position:absolute；position:relative絕對定位使用一般是父級定義position:relative定位，子級定義position:absolute絕對定位屬性，而且子級使用left或right和top或bottom進行絕對定位。xml

.divcss5{position:relative} 定義，一般最好再定義CSS寬度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 這裏定義了距離父級左側距離間距爲10px，距離父級上邊距離爲10px
或
.divcss5-a{position:absolute;right:10px;bottom:10px} 這裏定義了距離父級靠右距離10px,距離父級靠下邊距離爲10pxhtm

對應HTML結構
<div class="divcss5">
<div class="divcss5-a"></div>
</div>對象

這樣就絕對定位了「divcss5-a」在父級「divcss5」盒子內。blog

注意的是，left（左）和right（右）在一個對象只能選一種定義，bottom（下）和top（上）也是在一個對象只能選一種定義。

4、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。

一、css代碼以下

<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>

三、DIV+CSS絕對定位案例截圖

DIV+CSS position絕對定位佈局應用案例

5、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切片工具獲取準確的數值。

相關實例：div重疊

轉自 http://www.divcss5.com/rumen/r403.shtml