建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這里向大家簡(jiǎn)單介紹一下CSS+DIV布局中absolute和relative屬性的用法和區(qū)別，定位為relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在，而定位為absolute的層脫離正常文本流，但與relative的區(qū)別是其在正常流中的位置不在存在。
詳解CSS+DIV布局定位
在用CSS+DIV進(jìn)行布局定位的時(shí)候，一直對(duì)position的四個(gè)屬性值relative,absolute,static,fixed分的不是很清楚，以致經(jīng)常會(huì)出現(xiàn)讓人很郁悶的結(jié)果。今天研究了一下，總算有所了解。在此總結(jié)一下：
先看下position各個(gè)屬性值的定義：
1、static：默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。
2、relative：生成相對(duì)定位的元素，通過(guò)top,bottom,left,right的設(shè)置相對(duì)于其正常位置進(jìn)行定位?？赏ㄟ^(guò)z-index進(jìn)行層次分級(jí)。
3、absolute：生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò)"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定?？赏ㄟ^(guò)z-index進(jìn)行層次分級(jí)。
4、fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定?？赏ㄟ^(guò)z-index進(jìn)行層次分級(jí)。
static與fixed的定位方式較好理解，在此不做分析。下面對(duì)應(yīng)用的較多的relative和absolute進(jìn)行分析：
1、relative。
定位為relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。如圖1：
黃色背景的層定位為relative，紅色邊框區(qū)域?yàn)槠湓谡Ａ髦械奈恢?。在通過(guò)top、left對(duì)其定位后，從灰色背景層的位置可以看出其正常位置依然存在。
2、absolute。
定位為absolute的層脫離正常文本流，但與relative的區(qū)別是其在正常流中的位置不在存在。如圖2：
可以看到，在將黃色背景層定位為absolute后，灰色背景層自動(dòng)補(bǔ)上。#p#
3、relative與absolute的主要區(qū)別：
首先，是上面已經(jīng)提到過(guò)的在正常流中的位置存在與否。
其次，relative定位的層總是相對(duì)于其最近的父元素，無(wú)論其父元素是何種定位方式。如圖3：
圖中，紅色背景層為relative定位，其直接父元素綠色背景層為默認(rèn)的static定位。紅色背景層的位置為相對(duì)綠色背景層top、left個(gè)20元素。而如果紅色背景層定位為absolute，則情形如圖4：
可以看到，紅色背景層依然定義top:20px；left:20px；但其相對(duì)的元素變?yōu)槎ㄎ环绞綖閍bsolute或relative的黃色背景層。因此，對(duì)于absolute定位的層總是相對(duì)于其最近的定義為absolute或relative的父層，而這個(gè)父層并不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對(duì)body進(jìn)行定位，如圖5：
除top、left、right、bottom定位外，margin屬性值的定義也符合上述規(guī)則。
詳文參考：http://www.csschina.net/a/jc/css_709.html
【編輯推薦】
- 解讀CSS中absolute與relative的區(qū)別和聯(lián)系
- CSS 絕對(duì)定位屬性absolute用法初探
- DIV CSS建站對(duì)瀏覽器兼容性和注意事項(xiàng)
- CSS2.0中page-break-after屬性用法
- 解讀DIV CSS網(wǎng)頁(yè)布局中CSS無(wú)效十個(gè)原因
網(wǎng)頁(yè)標(biāo)題：CSS+DIV布局中absolute和relative區(qū)別
文章起源：http://www.5511xx.com/article/dpcccsc.html
