css中z-index是什麼意思？

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

css z-index

z-index ：auto|<integer>

auto 預設值

定義：一個元素在檔案中的層疊順序，用於確認元素在當前層疊上下文中的層疊級別。

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

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

1、同一層疊上下文

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

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

2、不同層疊上下文

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

例：

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

<body>  
    <div>  
        <p class="a">a</p>  
        <p class="c">c</p>  
    </div>  
    <div>  
        <p class="b">b</p>  
    </div>  
</body>

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是不是正常效果。

<body>
	<div class="box1">
		<p class="a">a</p>
		<p class="c">c</p>
	</div>
	<div class="box2">
		<p class="b">b</p>
	</div>
</body>

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

<style type="text/css">
		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是什麼意思？的詳細內容，更多請關注TW511.COM其它相關文章！