div cssz-index層重疊順序

div層、span層等html標籤層重疊順序樣式z-index，平時CSS使用較少，但也會難免會碰到CSS z-index使用。

從基礎語法到應用案例教程講解學習z-index。

一、z-index語法與結構

z-index 跟具體數字

div{  z-index:100}

注意：z-index的數值不跟單位。

z-index的數字越高越靠前，並且值必須為整數和正數（正數的整數）。

二、z-index使用條件

z-index在使用絕對定位 position:absolute屬性條件下使用才能使用。通常CSS讓不同的物件盒子以不同順序重疊排列，CSS就是要z-index樣式屬性。

三、案例1. z-index重疊順序案例

為了方便觀察，設定3個DIV盒子，分別設定不同css背景顏色，設定相同CSS高度、CSS寬度。分別設定背景顏色)為黑色、紅色、藍色。CSS width為300px，css height為100px。

css程式碼（沒加z-index屬性）

<style>            .div css5 {                position: relative;            }            .div css5-1,            .div css5-2,            .div css5-3 {                width: 300px;                height: 100px;                position: absolute;            }                .divcss5-1 {                background: #000;/* 黑色*/                left: 10px;                top: 10px            }            .divcss5-2 {                background: #F00;/* 紅色*/                left: 20px;                top: 20px            }            .divcss5-3 {                background: #00F;/* 藍色*/                left: 30px;                top: 30px            }</style>

CSS程式碼(加上z-index屬性後) :

<style>            .div css5 {                position: relative;            }            .div css5-1,            .div css5-2,            .div css5-3 {                width: 200px;                height: 100px;                position: absolute;            }            .div css5-1 {                z-index: 10;                background: #000;/* 黑色*/                left: 10px;                top: 10px            }            .div css5-2 {                z-index: 20;                background: #F00;/* 紅色*/                left: 20px;                top: 20px            }            .div css5-3 {                z-index: 15;              background: #00F;/* 藍色*/                left: 30px;                top: 30px            }</style>

html程式碼

 <div class="divcss5-1"></div> <div class="divcss5-2"></div> <div class="divcss5-3"></div>

沒加的效果:

加上z-index屬性效果：

2. 案例說明

三個盒子均都使用了絕對定位屬性position樣式，並且設定相同的高度和寬度樣式。為了便於觀察CSS使用left、right屬性並賦予不同值，讓其錯落有致。

Div css5-1 盒子背景為黑色， z-index:10Div css5-2 盒子背景為紅色， z-index:20Divcss5-3盒子背景為藍色 ， z-index:15

為可以看見第一個盒子z-index:10，所以重疊在最下層，而第二個盒子z-index:20，值最大所以最上層重疊，第三個盒子設定z-index:15，居中。