iv cssz-index層重疊順序

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

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

一、z-index語法與結構

z-index 跟具體數字

div{
  z-index:100
}

注意：z-index的數值不跟單位。

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

二、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值實現層重疊順序排列。代碼很簡單，希望能夠幫助你學習。

果你設置了兩個相鄰的 div 的 margin 為 8px ，但實際顯示的間距只有 8px 而不是預期的 16px ，這可能是因為 CSS 中的外邊距重疊（margin collapsing）導致的。

外邊距重疊是指當兩個垂直相鄰的塊級元素具有相鄰的外邊距時，它們的外邊距會合并為一個外邊距，取其中的最大值作為最終的外邊距值。這可能會導致你看到的實際間距小于預期值。

為了避免外邊距重疊，你可以嘗試以下方法：

給其中一個 div 添加內邊距（padding）： 可以給其中一個 div 添加內邊距，而不是使用外邊距來實現間距的效果。這樣就不會發生外邊距重疊。

使用空的塊級元素來間隔： 可以在兩個 div 之間添加一個空的塊級元素（例如 <div></div> ），并給這個元素設置期望的外邊距。這樣可以避免外邊距重疊問題。

使用 flex 布局或者絕對定位： 可以考慮使用 flex 布局或者絕對定位來控制元素之間的間距，這樣可以避免外邊距重疊問題。

下面是一個使用空的塊級元素來間隔的示例代碼：

<div class="container">

<div class="box"></div>

<div class="spacer"></div>

<div class="box"></div>

</div>

.container {

display: flex;

}

.box {

width: 50px;

height: 50px;

background-color: lightblue;

margin: 8px;

}

.spacer {

flex: 1;

}

通過以上方法，你應該可以避免外邊距重疊，實現兩個 div 之間的間距為 16px 的效果。