關(guān)于div的相對(duì)定位和z-index堆放次序的見解

關(guān)于定位的元素，大家知道是一個(gè)通用的position，相對(duì)定位relative只是定位中的一個(gè)屬性，我的理解是：相對(duì)定位不是相對(duì)于其他元素，而是被相對(duì)于被包含塊（子元素）。如果只定義一個(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)這種情況，在此之前我真的對(duì)position的這個(gè)效果一點(diǎn)都不理解，后來我找了我經(jīng)?？吹臅厦媸沁@樣描述的：“相對(duì)定位（relative）：元素可以在文檔流中的位置進(jìn)行定位?！被谶@個(gè)我實(shí)驗(yàn)了下，代碼如下：

1 .relative 2 { 3 position:relative; 4 left:-50px; 5 right:-40px; 6 background-color:#ccc; 7 } 居然ok可以定位，但它和絕對(duì)定位的區(qū)別就在于它不是基于包含塊（父元素）來定位的，它是基于自己原來所在文檔流中的位置來定位的。所以我認(rèn)為它已經(jīng)半脫離了網(wǎng)頁，它是浮在網(wǎng)頁之上的，但是又占據(jù)著文檔流中的位置。

大家可以試驗(yàn)一下，下面我想講的是我對(duì)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)檫@是在使用絕對(duì)定位時(shí)非常常見。

對(duì)于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è)例子，代碼如下：

1 <div id="product"> 2 <div id="sale-price"></div> 3 <div id="product_photo"></div> 4 </div> 相對(duì)應(yīng)的css

1 #product 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的上面。

本文來自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)公司-創(chuàng)新互聯(lián)

當(dāng)前題目：關(guān)于div的相對(duì)定位和z-index堆放次序的見解
網(wǎng)站鏈接：http://bm7419.com/news48/322548.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、軟件開發(fā)、網(wǎng)站建設(shè)、用戶體驗(yàn)、定制網(wǎng)站、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)