真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

    hello
    

    

    hello
    

    

z-index 取正整數(shù)，0 或 auto 時：

z-index 取負(fù)整數(shù)時：

細(xì)心的人可能會發(fā)現(xiàn)，在例子中，我們?yōu)檠b飾元素（類名 f）設(shè)置了定位屬性，并且 z-index 設(shè)置為 0。如果不這樣設(shè)置，當(dāng)元素（藍(lán)色背景的測試元素） z-index 取負(fù)整數(shù)時，就會跑到裝飾元素的后面。有關(guān)于這一點，后面“z-index 取負(fù)整數(shù)值”會講到。

z-index 與層疊上下文

z-index 可以影響層疊等級，但有個前提條件非常重要，就是參與比較的元素必須在同一個層面上，規(guī)范中稱之為“層疊上下文”?！吧舷挛摹闭f明這是一塊封閉的區(qū)域，區(qū)域內(nèi)的子元素不會影響到外部元素；而“層疊”，則意味著只要元素創(chuàng)建這個區(qū)域，就會在“z軸”上高于當(dāng)前上下文。
層疊上下文可以通過一些 CSS 屬性創(chuàng)建，常見的屬性如下：

• html 元素默認(rèn)創(chuàng)建的，稱為根層疊上下文，所有元素都會置于這個層上。

• position 值為 relative 或 absolute，且 z-index 值不是 auto(1)。

• position 值為 fixed。

• CSS3 新屬性，比如 opacity 值不是 1、 transform 值不是 none、z-index 值不是 auto 的 flex 和 grid 布局元素等等。

*(1)雖說 z-index:auto 和 z-index:0 可以看成是一樣 ，但 z-index: auto 所在的元素只是一個普通定位元素，而 z-index:0 會創(chuàng)建一個層疊上下文。兩者等級相同，后者將覆蓋前者。

實際工作中，很少使用 CSS3 新屬性去主動創(chuàng)建層疊上下文，因此，創(chuàng)建層疊上下文最常用的方法是，給定位元素設(shè)置 z-index 整數(shù)值。
前面介紹過，z-index 可以修改元素在當(dāng)前層疊上下文中的層疊等級，現(xiàn)在 z-index 又有了另一層含義，即創(chuàng)建一個新的層疊上下文。
下面，通過例子來更好的理解層疊上下文：

例子：

#1
    
#3
    

#2
    
#4
    

例子中，沒有元素設(shè)置 z-index 值，此時 z-index 就是默認(rèn)的 auto，因此，元素按照渲染順序，后者覆蓋前者。
如果為#3、#4設(shè)置正的 z-index 值，如下：

.f_1>div {
    z-index: 1;
}

.f_2>div {
    z-index: 2;
}

此時，父元素#1、#2并沒有設(shè)置 z-index 值，因此它們不會創(chuàng)建新的層疊上下文，這意味著#3、#4仍然同屬于根層疊上下文。
同一層疊上下文，層疊等級大的會覆蓋小的，所以#4在所有元素之上。
現(xiàn)在為#2、#3、#4設(shè)置 z-index 值，如下：

.f_1>div {
    z-index: 2;
}

.f_2 {
    z-index: 1;
}

.f_2>div {
    z-index: 9;
}

盡管#4的 z-index 值大于#3的，但由于#4屬于#2的子元素，其層疊等級完全受制于#2的等級。#2和#3同屬于根層疊上下文，且#3大于#2，因此#3在#2（及其子元素）之上。

z-index 取負(fù)整數(shù)值

常規(guī)理解 z-index 取負(fù)值，應(yīng)該會跑到背景色的后面：

例子：

實際工作中， z-index 取負(fù)值可以實現(xiàn)隱藏元素的效果。但如果為父元素創(chuàng)建層疊上下文，子元素就會隱藏不掉：

例子：

前后例子對比之后，已經(jīng)很明顯的表明，不管 z-index 的負(fù)值多大，依然無法突破當(dāng)前層疊上下文。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css層疊與z-index的使用示例”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!