DIV層、span層等html標(biāo)簽層重疊順序樣式z-index，平時(shí)我們使用較少，但也會(huì)難免會(huì)碰到CSS z-index使用。接下來(lái)divcss5介紹z-index從基本屬性到設(shè)置對(duì)象的層疊順序、重疊順序，從基礎(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屬性條件下使用才能使用。通常我們讓不同的對(duì)象盒子以不同順序重疊排列，我們就是要z-index樣式屬性。

三、z-index應(yīng)用案例

為了方便觀察z-index樣式屬性，我們?cè)O(shè)置3個(gè)DIV盒子，分別設(shè)置不同css背景顏色，設(shè)置相同CSS高度、CSS寬度。分別設(shè)置背景顏色為黑色、紅色、藍(lán)色。CSS width為100px，css height為50px

1、案例css代碼

2、html代碼片段

3、z-index案例截圖

Z-index樣式實(shí)踐實(shí)例案例

案例說(shuō)明：

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

Divcss5-1盒子背景為黑色，z-index:10
Divcss5-2盒子背景為紅色，z-index:20
Divcss5-3盒子背景為藍(lán)色，z-index:15

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

四、z-index總結(jié)

我們使用z-index重疊順序樣式，在實(shí)際DIV+CSS布局時(shí)候我們需要絕對(duì)定位樣式，并且可以使用left、right進(jìn)行定位，通過(guò)不同z-index值實(shí)現(xiàn)層重疊順序排列。

最新評(píng)論