什么是Css z-index重疊順序

本篇內(nèi)容介紹了“什么是Css z-index重疊順序”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

 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

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

“什么是Css z-index重疊順序”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！