css中z-index是什麼意思？

在css中，z-index的意思為“層級，層空間層疊等級”，可以指定一個元素的堆疊順序，用於確認元素在當前層疊上下文中的層疊級別，擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面；語法「元素{z-index ：auto|<integer>}」。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css z-index

z-index ：auto|<integer>

• auto 預設值

定義：一個元素在文件中的層疊順序，用來確認元素在目前層疊上下文中的層疊層級。

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

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

1、同一層疊上下文

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

層疊層級中的兩個元素，依據它們在HTML文檔流程中的順序，寫在後面的將會覆蓋前面的。

2、不同層疊上下文

元素的顯示順序是依據祖先的層疊層級來決定，與自身的層疊層級無關。

例如：

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

  
    <div>  
        <p>a</p>  
        <p>c</p>  
    </div>  
    <div>  
        <p>b</p>  
    </div>  

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

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處於一個層疊上下文中，所以根據z-index大小來決定層級。如下圖：

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

	<div>
		<p>a</p>
		<p>c</p>
	</div>
	<div>
		<p>b</p>
	</div>

p設定z-index，那麼p中的子元素以父元素的層疊關係為主。

<style>
		div {
			width: 100px;
			height: 100px;
			position: relative;
		}
		.box1 {
			z-index: 2;
		}
		.box2 {
			z-index: 1;
		}
		p {
			position: absolute;
			font-size: 20px;
			width: 100px;
			height: 100px;
		}
		.a {
			background-color: red;
		}
		.c {
			background-color: green;
			top: 20px;
			left: 20px;
		}
		.b {
			background-color: blue;
			top: -20px;
			left: 40px;
			z-index: 20;
		}
	</style>

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

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

更多程式設計相關知識，請造訪：程式設計學習網站！ ！

以上是css中z-index是什麼意思？的詳細內容。更多資訊請關注PHP中文網其他相關文章！