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

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

者： IT共享者來源： IT共享之家

div 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重疊順序案例

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

四、總結

距重疊解決方案(BFC)

首先要明確BFC是什么意思，其全英文拼寫為 Block Formatting Context 直譯為“塊級格式化上下文”

兩個或多個塊級盒子的垂直相鄰邊界會重合。結果的邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大的負邊界。注意：相鄰的盒子可能并非是由父子關系或同胞關系的元素生成。

但是邊界的重疊也有例外情況：

1、水平邊距永遠不會重合。

2、在規范文檔中，2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法如下：

a、全部都為正值，取最大者；

b、不全是正值，則都取絕對值，然后用正值減去最大值；

c、沒有正值，則都取絕對值，然后用0減去最大值。

注意：相鄰的盒模型可能由DOM元素動態產生并沒有相鄰或繼承關系。

3、相鄰的盒模型中，如果其中的一個是浮動的（float），垂直margin不會重疊，并且浮動的盒模型和它的子元素之間也是這樣。

4、設置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值為visible除外）。

5、設置了絕對定位（position:absolute）的盒模型，垂直margin不會被重疊，并且和他們的子元素之間也是一樣。

6、設置了display:inline-block的元素，垂直margin不會重疊，甚至和他們的子元素之間也是一樣。

7、如果一個盒模型的上下margin相鄰，這時它的margin可能重疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決于它的相鄰元素的margin是否重疊。

a、如果元素的margin和它的父元素的margin-top重疊在一起，盒模型border-top的邊界定義和它的父元素相同。

b、另外，任意元素的父元素不參與margin的重疊，或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零，那么元素的border-top邊界位置和原來一樣。

一個應用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom重疊。

注意，那些已經被重疊覆蓋的元素的位置對其他已經重疊的元素的位置沒有任何影響；只有在對這些元素的子元素定位時，border-top邊界位置才是必需的。

8、根元素的垂直margin不會被重疊。

外邊距(margin)重疊示例

外邊距重疊是指兩個垂直相鄰的塊級元素，當上下兩個邊距相遇時，起外邊距會產生重疊現象，且重疊后的外邊距，等于其中較大者。

圖示：

另一個重疊現象是當一個元素包含在另一個元素之中時，子元素與父元素之間也會產生重疊現象，重疊后的外邊距，等于其中最大者：

同理，如果一個無內容的空元素，其自身上下邊距也會產生重疊。

外邊距重疊的意義

外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。

案例：如下圖，父元素沒有設置margin-top，而子元素設置了margin-top：20px;可以看出，父元素也一起有了邊距。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 .demo{
 height:100px;
 background: #eee;
 }
 .parent{
 height:200px;
 background: #88f;
 }
 .child{
 height:100px;
 margin-top:20px;
 background: #0ff;
 width:200px;
 }
 </style>
</head>
<body>
 <section class="demo">
 <h2>此部分是能更容易看出讓下面的塊的margin-top。</h2>
 </section>
 <section class = "parent">
 <article class="child">
 <h2>子元素</h2>
 margin-top:20px;
 </article>
 <h2>父元素</h2>
 沒有設置margin-top
 </section>
</body>
</html>

解決這個辦法：父元素設置padding-top:20px 或者設置 overflow:hidden，子元素取消margin-top:20px;

防止外邊距重疊解決方案：

雖然外邊距的重疊有其一定的意義，但有時候我們在設計上卻不想讓元素之間產生重疊，那么可以有如下幾個建議可供參考：

外層元素padding代替
內層元素透明邊框 border:1px solid transparent;
內層元素絕對定位 postion:absolute:
外層元素 overflow:hidden;
內層元素加float:left;或display:inline-block;
內層元素padding:1px;

以上建議可根據實際情況來采取。

web前端其實很簡單！

如何學習呢？看下下面

領取方法：

關注“IT金勻” 然后私信回復“前端”即可

請記得給金勻先來個“評論+轉發”

在線咨詢

上一篇：jQuery 修改CSS偽元素屬性的方法
下一篇：「原生案例」如何在JavaScript中實現實時搜索功能

您的項目需求

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

整合營銷服務商