一篇文章帶你了解css z-index(重疊順序)

iv cssz-index層重疊順序

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

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

一、z-index語法與結構

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

div{
  z-index:100
}

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

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

二、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:10
Div css5-2 盒子背景為紅色， z-index:20
Divcss5-3盒子背景為藍色， z-index:15

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

四、總結

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

個視頻我們來寫兩個圓環(huán)。這個圓環(huán)雖然看起來只是普普通通的兩個圓，但是認真一看好像又沒那么簡單，因為它是交錯重疊起來的，并且還有一點陰影的效果，看起來比較真實。這個案例其實是UTube上面一個比較知名博主的教學案例，我們不妨來學習一下。

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

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

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

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

·加個邊框看一下，很明顯它并沒有和白色圓環(huán)完全重疊，而是在它里面。這是因為我們看到的這兩個圓環(huán)，看到的只是border邊框的區(qū)域。inset的設置為0，它只不過是貼在content內容區(qū)域里面，所以偽元素我們要把它擴大才可以。

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

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

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

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

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

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

在線咨詢

上一篇：Html網頁入門
下一篇：DOMPurify：一個只針對 DOM 的、超快的、寬容的 HTML XSS清理工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商