中文字幕丝袜人妻制服丝袜在线_ CSS position絕對定位absolute relative

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

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

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

三、絕對定位使用條件 - TOP

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

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

這樣就絕對定位了“divcss5-a”在父級“divcss5”盒子內。

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

四、position應用案例 - TOP

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

1、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進(jìn)行定位位置 */

.divcss5-b{ position:absolute;width:50px;height:50px;

right:15px;bottom:13px;background:#00F}

/* 使用絕對定位position:absolute樣式并且使用right bottom進(jìn)行定位位置 */

</style>

2、html代碼片段

</div>

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

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

五、css絕對定位總結 - TOP

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

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

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

DIVCSS5為您推薦的相關(guān)聯(lián)教程

div重疊

div css絕對定位布局實(shí)例

如需轉載，請注明文章出處和來(lái)源網(wǎng)址：http://www.divcss5.com/rumen/r403.shtml

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久