css中z-index是什麼意思？-css教學-PHP中文網

首頁

web前端

css教學

css中z-index是什麼意思？

青灯夜游

Nov 20, 2020 pm 02:21 PM

css z-index

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

css中z-index是什麼意思？

本教學操作環境：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是不是正常效果。

<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大小來決定層級。如下圖：

css中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大小來決定層級。如下圖所示：

css中z-index是什麼意思？

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

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7700

Java教學

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1230

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。