CSS position絕對(duì)定位absolute relative

昵稱10504424 2015-01-12

展開全文

CSS基礎(chǔ)必學(xué)列表

CSS position絕對(duì)定位absolute relative

DIV CSS position絕對(duì)定位absolute relative教程篇

常常使用position用于層的絕對(duì)定位,，比如我們讓一個(gè)層位于一個(gè)層內(nèi)具體什么位置,，為即可使用position:absolute和position:relative實(shí)現(xiàn)。

一,、position語法與結(jié)構(gòu) - TOP

position語法：
position : static absolute relative

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

position說明：
設(shè)置對(duì)象的定位方式,，可以讓布局層容易位置絕對(duì)定位，控制盒子對(duì)象更加準(zhǔn)確,。

二,、position實(shí)際用處 - TOP

絕對(duì)定位position用于定位盒子對(duì)象，有時(shí)一個(gè)布局中幾個(gè)小對(duì)象,，不易用css padding,、css margin進(jìn)行相對(duì)定位，這個(gè)時(shí)候我們就可以使用絕對(duì)定位來輕松搞定,。特別是一個(gè)盒子里幾個(gè)小盒子不規(guī)律的布局,，這個(gè)時(shí)候我們使用position絕對(duì)定位非常方便布局對(duì)象。

position絕對(duì)定位示范圖
絕對(duì)定位position示范適用圖,、不規(guī)律布局,，為即可利用position:absolute；position:relative進(jìn)行絕對(duì)定位

絕對(duì)定位與float浮動(dòng)不能同時(shí)使用,，比如一個(gè)大盒子里有的是絕對(duì)定位,，有的是使用css float浮動(dòng)定位,，這樣IE6瀏覽器將不會(huì)顯示改大對(duì)象里的這些絕對(duì)定位與相對(duì)定位，這也算是IE6 CSS HACK吧,，注意不要混用即可,。

三、絕對(duì)定位使用條件 - TOP

position:absolute,；position:relative絕對(duì)定位使用通常是父級(jí)定義position:relative定位,，子級(jí)定義position:absolute絕對(duì)定位屬性，并且子級(jí)使用left或right和top或bottom進(jìn)行絕對(duì)定位,。

.divcss5{position:relative} 定義,，通常最好再定義CSS寬度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 這里定義了距離父級(jí)左側(cè)距離間距為10px，距離父級(jí)上邊距離為10px
或
.divcss5-a{position:absolute;right:10px;bottom:10px} 這里定義了距離父級(jí)靠右距離10px,距離父級(jí)靠下邊距離為10px

對(duì)應(yīng)HTML結(jié)構(gòu)
<div class="divcss5">
<div class="divcss5-a"></div>
</div>

這樣就絕對(duì)定位了“divcss5-a”在父級(jí)“divcss5”盒子內(nèi),。

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

四、position應(yīng)用案例 - TOP

這里DIVCSS5為大家實(shí)例應(yīng)用position絕對(duì)定位,，我們?cè)O(shè)置一個(gè)最外層盒子css邊框為紅色,，css width為400px,css height為200px,內(nèi)部包含了2個(gè)盒子，為就用絕對(duì)定位這2個(gè)盒子,，第一個(gè)盒子CSS命名為“divcss5-a”,其寬度為100px,背景顏色為黑色,，高度為100px,定位距離父級(jí)上為10px，距離左為10px;第二個(gè)盒子CSS類命名為“divcss5-b”,，其寬度和高度分別為50px,css背景顏色為藍(lán)色,，距離父級(jí)下距離為13px,距離父級(jí)右邊為15px。

1,、css代碼如下

<style> 
.divcss5{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定義父級(jí)position:relative 為就認(rèn)為是絕對(duì)定位聲明吧 */ 
.divcss5-a{ position:absolute;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
/* 使用絕對(duì)定位position:absolute樣式 并且使用left top進(jìn)行定位位置 */ 
.divcss5-b{ position:absolute;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
/* 使用絕對(duì)定位position:absolute樣式 并且使用right bottom進(jìn)行定位位置 */ 
</style>

2,、html代碼片段

<div class="divcss5"> 
    <div class="divcss5-a"></div> 
    <div class="divcss5-b"></div> 
</div>

3、DIV+CSS絕對(duì)定位案例截圖

CSS position absolute relative絕對(duì)定位應(yīng)用案例截圖
DIV+CSS position絕對(duì)定位布局應(yīng)用案例

五,、css絕對(duì)定位總結(jié) - TOP

通常我們使用position:absolute,；position:relative進(jìn)行絕對(duì)定位布局，通過CSS進(jìn)行定義定位,，DIV布局HTML,，注意什么地方使用position:relative，什么地方使用position:absolute進(jìn)行定位,，同時(shí)不要忘記使用left,、right、top,、bottom的配合定位具體位置,。絕對(duì)定位如果父級(jí)不使用position:relative,，而直接使用position:absolute絕對(duì)定位，這個(gè)時(shí)候?qū)?huì)以body標(biāo)簽為父級(jí),，使用position:absolute定義對(duì)象無論位于DIV多少層結(jié)構(gòu),，都將會(huì)被拖出以<body>為父級(jí)（參考級(jí)）進(jìn)行絕對(duì)定位。絕對(duì)定位非常好用,，但切記不要濫用,，什么地方都用，這樣有時(shí)會(huì)懶得計(jì)算距離上,、下,、左、右間距,，同時(shí)可能會(huì)造成CSS代碼臃腫,，更加經(jīng)驗(yàn)適當(dāng)使用，用于該使用地方,。

在絕對(duì)定位時(shí)候我們可以使用css z-index定義css層重疊順序,。

同時(shí)left、right,、bottom,、top的數(shù)值，可以使用（Photoshop）PS切片工具獲取準(zhǔn)確的數(shù)值,。

如需轉(zhuǎn)載,，請(qǐng)注明文章出處和來源網(wǎng)址：http://www./rumen/r403.shtml

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：昵稱10504424 > 《工作》

舉報(bào)/認(rèn)領(lǐng)