詳解css中的z-index（一）-css教學-PHP中文網

首頁

web前端

css教學

詳解css中的z-index（一）

零下一度

May 12, 2017 pm 02:16 PM

Z-index

在我們常用的css中z-index 屬性是設定節點的堆疊順序, 這是我們對z-index 屬性普遍的認識. 同時, 我們總是對堆疊順序的概念模糊不清，這樣將會導致我們在平時的佈局中出現一些問題。下面我個人對css中z-index的一些個人的認識，希望能幫到大家，有說錯的地方希望大家指正。

css佈局中我們常常使用一些float:laft;和float:right;以及定位中的absolute,relative,fixed;

;以及定位中的absolute,relative,fixed;

#有的人誤認為定位和定位之間是本身就存在附帶堆疊順序的,在自己經過測試之後發現,他們的默認是沒有堆疊順序的,只是在html中標籤的前後順序導致的而使大家誤認為是定位和定位之間的堆疊順序而導致的。

下面是正常使用z-index程式碼範例：

定位中的static是標準流，所以這裡不做講解

當我們有三個盒子

div {
 width: 100px;
 height: 100px;
 color: white;
 float: left;
 }
.div1 {
 position: fixed;
 background-color: red;
 }
.div2 {
 background-color: blue;
 position: relative;
 }
.div3 {
 background-color: green;
 position: absolute;
 }
 </style>
</
head
>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>

登入後複製

我們給他們分別設定fixed，relative，absolute；背景色為紅色，藍色，綠色

我們會發現absolute的綠色盒子會在最上面，在html程式碼中改變標籤的位置順序則可以讓盒子出現在堆疊層的最上面，當然如果我們要想在不改變

html標籤

的順序，那麼我們就可以使用第二種方法z-index：

在我們加入z-index是要注意這個樣式是有值的；值也可以影響我們的堆疊順序。

樣式內z-index的值越大的堆疊層越高，當然我們也要注意z-index也並不是什麼時候都管用的。

只有在同一樣式時，例如定位與定位之間的堆疊，

浮動

與浮動之間的堆疊，如果有兩個盒子，一個盒子為浮動元素一個盒子為定位元素，兩個盒子發生堆疊，此時我們想要浮動的盒子顯示在定位盒子之上，我們是沒有辦法的，設置z-index這個時候是沒有用的。

定位的盒子本身堆疊的順序就要比浮動的盒子的堆疊順序要高，所以此時我們要解決這個問題就需要把浮動盒子換成定位的盒子，設置之後我們就可以z -index來設定堆疊順序了。

上面是本人的一點個人觀點，希望可以幫到大家，後續自己也會寫一些關於web中一些個人認識。有不同觀點大家可以隨意發表。

【相關推薦】

免費css線上影片教學

css線上手冊

#3. ###php.cn獨孤九賤（2）－css影片教學#######

以上是詳解css中的z-index（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7546

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

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

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

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

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

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

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

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

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 的網格系統、組件和样式創建響應式網站和應用程序。