iv 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，居中。

四、總結(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í)。

個(gè)視頻我們來(lái)寫(xiě)兩個(gè)圓環(huán)。這個(gè)圓環(huán)雖然看起來(lái)只是普普通通的兩個(gè)圓，但是認(rèn)真一看好像又沒(méi)那么簡(jiǎn)單，因?yàn)樗墙诲e(cuò)重疊起來(lái)的，并且還有一點(diǎn)陰影的效果，看起來(lái)比較真實(shí)。這個(gè)案例其實(shí)是UTube上面一個(gè)比較知名博主的教學(xué)案例，我們不妨來(lái)學(xué)習(xí)一下。

可能很多人也看過(guò)，我們今天主要來(lái)實(shí)現(xiàn)這兩個(gè)圓環(huán)重疊的部分，陰影的部分比較簡(jiǎn)單，大家可以自己去思考一下。html里面這兩個(gè)div就是這兩個(gè)圓環(huán)，樣式現(xiàn)在寫(xiě)了一些基本的樣式，其它樣式重新來(lái)寫(xiě)。

·先來(lái)把這兩個(gè)圓環(huán)的基礎(chǔ)樣式寫(xiě)出來(lái)，兩個(gè)圓有了，然后把其中一個(gè)變成紅色，再讓它們先簡(jiǎn)單的重疊一下，控制一下第二個(gè)圓環(huán)，調(diào)整一下它的邊框顏色就可以了，把它變成紅色。

·再往左邊移動(dòng)60像素，先簡(jiǎn)單重疊起來(lái)。現(xiàn)在兩個(gè)圓只是簡(jiǎn)單的重疊，我們要怎么樣實(shí)現(xiàn)這種交錯(cuò)重疊？就好像兩個(gè)圓環(huán)是穿起來(lái)的這種感覺(jué)。這里分別給這兩個(gè)圓環(huán)加個(gè)偽元素，我們是可以通過(guò)定位把一個(gè)盒子撐起來(lái)的。

·這里給它設(shè)置一下inset，關(guān)鍵就是inset設(shè)置為多少合適。如果是設(shè)置為0，也就是四個(gè)方向都是設(shè)為0，按道理應(yīng)該是和父元素完全重疊的(沒(méi)border的話)。

·加個(gè)邊框看一下，很明顯它并沒(méi)有和白色圓環(huán)完全重疊，而是在它里面。這是因?yàn)槲覀兛吹降倪@兩個(gè)圓環(huán)，看到的只是border邊框的區(qū)域。inset的設(shè)置為0，它只不過(guò)是貼在content內(nèi)容區(qū)域里面，所以偽元素我們要把它擴(kuò)大才可以。

·這里要調(diào)整一下inset的值，0是剛好貼滿content的區(qū)域，設(shè)置為正值它是收縮的，所以這里設(shè)置為-25px。現(xiàn)在和白色的圓環(huán)就一樣大了，只不過(guò)一個(gè)正方形一個(gè)圓形，等一下把偽元素調(diào)整成圓的就可以了。

·然后單獨(dú)來(lái)設(shè)置一下上邊框，同樣也是白色的邊框，還有右邊框也單獨(dú)設(shè)置一下。ok，再把另外兩條邊框設(shè)置為透明。現(xiàn)在左邊和下邊就看不到了，再把它設(shè)置成一個(gè)圓，這樣它就可以和第一個(gè)圓環(huán)完全重疊起來(lái)了。

·現(xiàn)在偽元素這半個(gè)圓環(huán)就和本來(lái)的圓環(huán)完全重疊起來(lái)，那有什么用？還是和原來(lái)的一樣，但是現(xiàn)在就可以單獨(dú)給偽元素這半個(gè)圓環(huán)設(shè)置層級(jí)了，把層級(jí)調(diào)高一點(diǎn)，這樣這一段圓環(huán)它就可以蓋在上面，然后再給它旋轉(zhuǎn)一下位置，讓它旋轉(zhuǎn)負(fù)的四十五度，這樣兩個(gè)圓環(huán)貫穿重疊起來(lái)的效果就完成了。

其實(shí)就是借助了一個(gè)偽元素做了一個(gè)障眼法，如果想實(shí)現(xiàn)圓環(huán)交匯的地方有點(diǎn)陰影的效果，也可以多寫(xiě)兩個(gè)偽元素來(lái)實(shí)現(xiàn)，這個(gè)大家可以自己來(lái)思考一下。

這個(gè)視頻就到這里，感謝大家的收看。

chart 多圖同一Div 渲染重疊的問(wèn)題，實(shí)驗(yàn)下來(lái)，最有效的一個(gè)方法就是這個(gè)，在初始化之前，加一句 removeAttr。。, 其他方法如.clear, .dispose， .setOption({},true) 均失敗。。。