div cssz－index層重疊順序

div層、span層等html標(biāo)簽層重疊順序樣式z－index，平時(shí)CSS使用較少，但也會(huì)難免會(huì)碰到CSS z－index使用。

從基礎(chǔ)語(yǔ)法到應(yīng)用案例教程講解學(xué)習(xí)z－index。

一、z－index語(yǔ)法與結(jié)構(gòu)

z－index 跟具體數(shù)字

div｛  z－index：100｝

注意：z－index的數(shù)值不跟單位。

z－index的數(shù)字越高越靠前，并且值必須為整數(shù)和正數(shù)（正數(shù)的整數(shù)）。

二、z－index使用條件

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

三、案例

1．  z－index重疊順序案例

為了方便觀察，設(shè)置3個(gè)DIV盒子，分別設(shè)置不同css背景顏色，設(shè)置相同CSS高度、CSS寬度。分別設(shè)置背景顏色）為黑色、紅色、藍(lán)色。CSS width為300px，css height為100px。

css代碼（沒(méi)加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； 藍(lán)色                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； 藍(lán)色                left： 30px；                top： 30px            ｝＜／style＞

html代碼

＜div class＝＂divcss5－1＂＞＜／div＞ ＜div class＝＂divcss5－2＂＞＜／div＞ ＜div class＝＂divcss5－3＂＞＜／div＞

沒(méi)加的效果：

加上z－index屬性效果：

2． 案例說(shuō)明

三個(gè)盒子均都使用了絕對(duì)定位屬性position樣式，并且設(shè)置相同的高度和寬度樣式。為了便于觀察CSS使用left、right屬性并賦予不同值，讓其錯(cuò)落有致。

Div css5－1 盒子背景為黑色， z－index：10

Div css5－2 盒子背景為紅色， z－index：20

Divcss5－3盒子背景為藍(lán)色 ，   z－index：15

為可以看見第一個(gè)盒子z－index：10，所以重疊在最下層，而第二個(gè)盒子z－index：20，值最大所以最上層重疊，第三個(gè)盒子設(shè)置z－index：15，居中。

四、總結(jié)

本文基于CSS基礎(chǔ)，介紹了如何使用z－index重疊順序樣式，在實(shí)際DIV＋CSS布局時(shí)候CSS需要絕對(duì)定位樣式，并且可以使用left、right進(jìn)行定位，通過(guò)不同z－index值實(shí)現(xiàn)層重疊順序排列。代碼很簡(jiǎn)單，希望能夠幫助你學(xué)習(xí)。