關于div的相對定位和z-index堆放次序的見解

關于定位的元素，大家知道是一個通用的position，相對定位relative只是定位中的一個屬性，我的理解是：相對定位不是相對于其他元素，而是被相對于被包含塊（子元素）。如果只定義一個position:relative;這個不會產(chǎn)生太大的效果，但是它的本質(zhì)已經(jīng)變了，從網(wǎng)頁內(nèi)變到了“網(wǎng)頁外”。為什么這么說呢？我去年做一個朋友的廣告，發(fā)現(xiàn)運用了position的塊竟然能夠遮擋住網(wǎng)頁內(nèi)的漂浮廣告，還有運用了這個元素的塊明顯加載比較快，我又實驗了幾次都會出現(xiàn)這種情況，在此之前我真的對position的這個效果一點都不理解，后來我找了我經(jīng)常看的書，上面是這樣描述的：“相對定位（relative）：元素可以在文檔流中的位置進行定位?！被谶@個我實驗了下，代碼如下：

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

大家可以試驗一下，下面我想講的是我對z-index堆放次序的理解：

z-index屬性允許決定元素的堆放次序。z指的是z軸，它說明不是處理左右定位（X軸）或者上下定位（Y軸），而我理解它好像就是使用3D效果那樣，可以重疊堆放一層一層的摞起來。當元素重疊而且標記流內(nèi)置的默認堆放設置無法實現(xiàn)的效果時，z-index很重要，因為這是在使用絕對定位時非常常見。

對于z-index可以使用兩種值：

1.整數(shù)（0、1、2、3）

2.out

out值是默認的一個值，這個值只用來覆蓋在css中其他地方聲明的另一個樣式。不過很多時候我使用的是整數(shù)。

在使用整數(shù)時，z-index的值最高的那個要出現(xiàn)在比這個值低的元素上面。打個比方來說手里拿了10張撲克，最上面的是10，最下面那個是1就行了。在一個包含塊中，z-index值為1的元素總在值為10的元素的下面，也就是說值大的永遠排在最上面。

舉個例子，代碼如下：

1 <div id="product"> 2 <div id="sale-price"></div> 3 <div id="product_photo"></div> 4 </div> 相對應的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 } 如果這兩個元素定位的位置相互重疊的話，z-index值最高的#sale-price元素出現(xiàn)在#product_photo的上面。

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

當前題目：關于div的相對定位和z-index堆放次序的見解
網(wǎng)站鏈接：http://www.muchs.cn/news48/322548.html

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

廣告

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