CSS堆疊順序

層疊上下文，英文稱作”stacking context”. 是HTML中的一個三維的概念。如果一個元素含有層疊上下文，我們可以理解為這個元素在z軸上就“高人一等”。

目前創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、鄧州網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

z軸通常指用戶眼睛到屏幕的一條直線。所有的元素都有層疊順序。

首先，我們創(chuàng)建一個div框。

當(dāng)我們試著去改變background: black,我們會發(fā)現(xiàn)由于背景顏色蓋在邊框之上，邊框的顏色會有所改變。

我們試著給這個div中加個內(nèi)聯(lián)元素，會發(fā)現(xiàn)，內(nèi)聯(lián)元素比那個沒有因為背景是黑色，而隱藏掉。

內(nèi)聯(lián)元素是在background之上的，所以不會被背景色覆蓋掉。

接著，我們在div中再創(chuàng)建一個內(nèi)聯(lián)元素

我們會發(fā)現(xiàn)，子元素的背景色覆蓋掉了父元素的背景色。然后，我們給子元素加個margin-top，子元素中的內(nèi)聯(lián)元素會將父元素中的文字覆蓋掉。

我們繼續(xù)添加一個浮動元素,同時稍微修改下子元素的樣式，方便我們觀察。

給float元素加一個margin，我們可以看到，藍色的float元素，覆蓋在div之上。

我們繼續(xù)添加兩個div元素

此時，我們可以看到，后出現(xiàn)的元素會覆蓋在先出現(xiàn)的元素之上，但是，浮動元素仍然在頂端。

我們給兩個元素都加上position。

這時，兩個div都在float元素的上層。后出現(xiàn)的橙色元素暫時在最上面。

我們接著給.relative1加上一個z-index

此時.relative1就在最上層。但是我們給.child加上z-index并沒有效果，因為要給定位元素加上z-index（不為auto）才能觸發(fā)堆疊上下文。

總結(jié)下來就是下圖所示（原諒我盜圖）：

CSS堆疊上下文（The stacking context）

堆疊順序（stacking order）：HTML 內(nèi)元素發(fā)生層疊的時候的特定垂直順序,即元素在用戶視線方向上的順序。

一般而言，div 以內(nèi)在層疊順序上對于視覺有影響的一般有以下幾個：

接下來，我們一個一個來測試一下他們的堆疊順序。

在日常寫頁面中，很大可能是這樣的：

一個 div 元素內(nèi)有一個 background 和一個 border，它們兩者是分開的嗎？

現(xiàn)在，將該 div 的 border 顏色改為半透明

從上圖可以看出來，內(nèi)聯(lián)元素和塊級元素的堆疊順序都是大于 background 的，那么他們與 border 相比較呢？

想辦法把這兩個元素移動到與 border 相覆蓋，就可以知道他們的堆疊順序。

往兩個元素上分別加一個 margin-left：-10px;

可以知道，內(nèi)聯(lián)元素和塊級元素的堆疊順序都大于 border 的堆疊順序。那么這兩者之間的堆疊順序呢？

再往塊級元素上加一個 margin-top:-10px;

先加一個浮動元素，背景色為藍色。

現(xiàn)在，先測試一次，藍色的浮動元素與目前已知的最高級的內(nèi)聯(lián)元素哪個堆疊順序比較大。給浮動元素加一個margin-top:-60px;

依然是加一個定位元素

依然是加margin-top:-50px;

可以看到，position:relative; 的元素直接蓋住了目前已知最高等級的內(nèi)聯(lián)元素，說明 position:relative; 的元素的堆疊順序比內(nèi)聯(lián)元素的要大。

接下來看一下 position:absolute; 將上面 position:relative; 改為 position:absolute;

從圖片可以看出結(jié)果是一摸一樣的，說明 position:relative和 position:absolute; 有一樣的堆疊順序。

所以： 定位元素 內(nèi)聯(lián)元素 浮動元素 塊級元素 border background

首先要知道，z-index 生效的前提是該元素是 position 屬性值是非static的元素，此時的 z-index為 auto。再添加一個元素，使它的 z-index生效

接下來，繼續(xù)給一個margin-top：-40px;

可以看到，橙色元素完全被蓋住了。

修改一下margin，試著讓它顯示出來。

可以看到，即使不加margin負(fù)值，依然看不到。

設(shè)置margin-top:70px;

可以看到，橙色有一部分被背景蓋住了，說明:

綜合上面所有內(nèi)容，元素的堆疊順序就出來了。

就是下面這個：

上面的順序，越大的離用戶越近。

堆疊上下文：stacking context，類似與作用域，由不同的CSS屬性造成的一類具有相同特征的東西，并沒有特定的概念。堆疊上下文影響的是元素 CSS 屬性中的 z-index，父元素是否是堆疊上下文，對具有z-index屬性的子元素的堆疊順序有影響。

文檔中的層疊上下文由滿足以下任意一個條件的元素形成：

接下來看一下堆疊上下文對 z-index 的影響：

首先創(chuàng)建一個父元素的 div 作為容器，然后添加兩個子 div ，兩個子 div 里分別添加一個子 div

接下來，使用 CSS 添加樣式，此時頁面內(nèi)有一個堆疊上下文=》html 元素

接下來給 bbb 添加一個 z-index:1;并使它移動到 aaa 的位置。

頁面并沒有變化，那么這時候修改一下 aaa 和 bbb 的z-index 大小呢？將 aaa 的 z-index 改為2

接下來讓 parent 元素形成堆疊上下文,并給 a 和 b 一個負(fù)z-index

部分參考自：

css怎么讓兩張圖片疊加，不用background只用img疊加

css層疊圖片代碼：

pre name="code" class="html"div style="position: relative;"http://這個層為外面的父層，只需設(shè)置相對位置樣式即可

div style="position: absolute;"http://這個為里面要疊加的層，只需設(shè)置絕對樣式

img src="img/sunshuai.jpg"http:///這個為層里面的內(nèi)容圖片

/div

img src="20110110/871_129391305700000000.jpg"http:///這個為父層內(nèi)容

/div

或者：

div?style="position:absolute;z-index:1;left:10px;top:10px;"

img?src="a.gif"?width="100"?height="100"/div

div?style="position:absolute;z-index:2;left:60px;top:60px;"

img?src="b.gif"?width="100"?height="100"/div

擴展資料：

CSS 中重要的疊加層疊概念：

1. 層疊上下文 (Stacking Context)

層疊上下文 (堆疊上下文, Stacking

2. 層疊等級 (Stacking Level)

層疊等級 (層疊水平, Stacking Level) 決定了同一個層疊上下文中元素在z軸上的顯示順序的概念，普通元素的層疊等級優(yōu)先由其所在的層疊上下文決定。層疊等級的比較只有在同一個層疊上下文元素中才有意義。

在同一個層疊上下文中，層疊等級描述定義的是該層疊上下文中的元素在Z軸上的上下順序。

3. 層疊順序 (Stacking Order)

層疊順序 (層疊次序, 堆疊順序, Stacking Order) 描述的是元素在同一個層疊上下文中的順序規(guī)則，從層疊的底部開始，共有七種層疊順序：

（1）背景和邊框：形成層疊上下文的元素的背景和邊框。

（2）負(fù)z-index值：層疊上下文內(nèi)有著負(fù)z-index值的定位子元素，負(fù)的越大層疊等級越低；

（3）塊級盒：文檔流中塊級、非定位子元素；

（4）浮動盒：非定位浮動元素；

（5）行內(nèi)盒：文檔流中行內(nèi)、非定位子元素；

（6）z-index: 0：z-index為0或auto的定位元素， 這些元素形成了新的層疊上下文；

（7）正z-index值：z-index 為正的定位元素，正的越大層疊等級越高；

同一個層疊順序的元素按照在HTML里出現(xiàn)的順序?qū)盈B；第7級順序的元素會顯示在之前順序元素的上方，也就是看起來覆蓋了更低級的元素。

參考資料來源：百度百科-css

網(wǎng)頁名稱：css樣式堆疊,CSS堆疊
分享地址：http://chinadenli.net/article21/dsichcd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、軟件開發(fā)、、做網(wǎng)站、面包屑導(dǎo)航、電子商務(wù)

廣告

聲明：本網(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)