在css中，z-index的意思為“層級，層空間層疊等級”，可以指定一個元素的堆疊順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

成都創(chuàng)新互聯(lián)公司長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為蚌埠企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作，蚌埠網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

css z-index

z-index ：auto|

auto 默認(rèn)值

定義：一個元素在文檔中的層疊順序，用于確認(rèn)元素在當(dāng)前層疊上下文中的層疊級別。

適用于：定位元素。即定義了position為非static的元素

每個元素層疊順序由所屬的層疊上下文和元素本身的層疊級別決定（每個元素僅屬于一個層疊上下文）。

1、同一層疊上下文

層疊級別大的顯示在上面，級別小的顯示在下面；

層疊級別中的兩個元素，依據(jù)它們在HTML文檔流中的順序，寫在后面的將會覆蓋前面的。

2、不同層疊上下文

元素的顯示順序依據(jù)祖先的層疊級別來決定，與自身的層疊級別無關(guān)。

例：

1、有兩個p盒子，a、c在一個盒子里，b在另一個盒子里，來考慮其z-index是不是正常效果。

    
a
    
c
    
b
  

p未設(shè)置z-index，在高級瀏覽器下不會產(chǎn)生新的局部層疊上下文，也就是說它們的子元素沒有被新的局部層疊上下文包裹，那么它們的子元素就處在同一個層疊上下文中，可以直接通過自身的層疊級別來決定顯示順序。

div {  position: relative;  width: 100px;  height: 100px;  
   }  
p {  position: absolute;  font-size: 20px;  width: 100px;  height: 100px;  
   }  
.a {  background-color: pink;  z-index: 1;  
   }     
.c {  background-color: green;  z-index: 2;  top: 20px;  left: 20px;  
   }  
.b {  background-color: red;  z-index: 3;  top: -20px;  left: 40px;    }

a、b、c處于一個層疊上下文中，所以根據(jù)z-index大小來確定層級。如下圖所示：

2、有兩個p盒子，a、c在一個盒子里，b在另一個盒子里，來考慮其z-index是不是正常效果。

	

		
a
		
c
	
	

		
b
	

p設(shè)置z-index，那么p中的子元素以父元素的層疊關(guān)系為主。

a、b、c處于不同的層疊上下文中，所以根據(jù)父級的z-index大小來確定層級。如下圖所示：

由上，可以看出z-index的決定方式：所屬的層疊上下文和元素本身的層疊級別

更多編程相關(guān)知識，請訪問：編程學(xué)習(xí)網(wǎng)站?。?
當(dāng)前文章：css中z-index是什么意思？
網(wǎng)頁路徑：http://weahome.cn/article/cjdshs.html