關(guān)于div的相對定位和z-index堆放次序的理解
我上一章寫了《談?wù)勎覐氖聎eb前端設(shè)計(jì)對div絕對定位的心得》這個(gè)，有朋友說想要把相對定位也講一下，正好中午無事，特寫出來供大家指正。
關(guān)于定位的元素，大家知道是一個(gè)通用的position，相對定位relative只是定位中的一個(gè)屬性，我的理解是：相對定位不是相對于其他元素，而是被相對于被包含塊（子元素）。如果只定義一個(gè)position:relative;這個(gè)不會(huì)產(chǎn)生太大的效果，但是它的本質(zhì)已經(jīng)變了，從網(wǎng)頁內(nèi)變到了“網(wǎng)頁外”。為什么這么說呢？我去年做一個(gè)朋友的廣告，發(fā)現(xiàn)運(yùn)用了position的塊竟然能夠遮擋住網(wǎng)頁內(nèi)的漂浮廣告，還有運(yùn)用了這個(gè)元素的塊明顯加載比較快，我又實(shí)驗(yàn)了幾次都會(huì)出現(xiàn)這種情況，在此之前我真的對position的這個(gè)效果一點(diǎn)都不理解，后來我找了我經(jīng)?？吹臅?，上面是這樣描述的：“相對定位（relative）：元素可以在文檔流中的位置進(jìn)行定位?！被谶@個(gè)我實(shí)驗(yàn)了下，代碼如下：
2 {
3 position:relative;
4 left:-50px;
5 right:-40px;
6 background-color:#ccc;
7 }
居然ok可以定位，但它和絕對定位的區(qū)別就在于它不是基于包含塊（父元素）來定位的，它是基于自己原來所在文檔流中的位置來定位的。所以我認(rèn)為它已經(jīng)半脫離了網(wǎng)頁，它是浮在網(wǎng)頁之上的，但是又占據(jù)著文檔流中的位置。
大家可以試驗(yàn)一下，下面我想講的是我對z-index堆放次序的理解：
z-index屬性允許決定元素的堆放次序。z指的是z軸，它說明不是處理左右定位（X軸）或者上下定位（Y軸），而我理解它好像就是使用3D效果那樣，可以重疊堆放一層一層的摞起來。當(dāng)元素重疊而且標(biāo)記流內(nèi)置的默認(rèn)堆放設(shè)置無法實(shí)現(xiàn)的效果時(shí)，z-index很重要，因?yàn)檫@是在使用絕對定位時(shí)非常常見。
對于z-index可以使用兩種值：
1.整數(shù)（0、1、2、3）
2.out
out值是默認(rèn)的一個(gè)值，這個(gè)值只用來覆蓋在css中其他地方聲明的另一個(gè)樣式。不過很多時(shí)候我使用的是整數(shù)。
在使用整數(shù)時(shí)，z-index的值最高的那個(gè)要出現(xiàn)在比這個(gè)值低的元素上面。打個(gè)比方來說手里拿了10張撲克，最上面的是10，最下面那個(gè)是1就行了。在一個(gè)包含塊中，z-index值為1的元素總在值為10的元素的下面，也就是說值最大的永遠(yuǎn)排在最上面。
舉個(gè)例子，代碼如下：
2 <div id="sale-price"></div>
3 <div id="product_photo"></div>
4 </div>
相對應(yīng)的css
2 {
3 position:relative;
4 }
5 #sale-price
6 {
7 position:absolute;
8 z-index:2;
9 }
10 #product_photo
11 {
12 position:absolute;
13 z-index:1;
14 }
如果這兩個(gè)元素定位的位置相互重疊的話，z-index值最高的#sale-price元素出現(xiàn)在#product_photo的上面。
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
