欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css 層疊與z-index的示例代碼

  發(fā)布時(shí)間：2020-03-23 15:40:28   作者：為愛(ài)心太軟   我要評(píng)論
這篇文章主要介紹了css 層疊與z-index的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

層疊與層疊等級(jí)

HTML 元素是一個(gè)三維的概念，除了水平和垂直方向外，還會(huì)在“z 軸”上層層疊加。
既然是疊加，就會(huì)涉及到先后順序的問(wèn)題，規(guī)范中稱之為“層疊等級(jí)”。
默認(rèn)情況下，圖文是網(wǎng)頁(yè)的核心，因此內(nèi)聯(lián)元素的等級(jí)理應(yīng)最高；然后是布局，其中浮動(dòng)元素（脫離文檔流）的等級(jí)高于塊級(jí)元素；最低等級(jí)是設(shè)置背景、邊框等裝飾屬性的元素。

例子：

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        padding: 10px;
    }
    
    .f div:first-of-type,
    .f div:last-of-type {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        margin-left: 10px;
    }
    
    .f div:last-of-type {
        background-color: rgba(221, 221, 255, .8);
        border: 1px dashed #000099;
        float: left;
        margin-top: -90px;
        margin-left: 30px;
    }
    
    label {
        background-color: rgba(247, 236, 27, 0.8);
        border: 1px dashed #FFC107;
        padding: 5px;
    }
</style>

<div class="f">
    <label>hello</label>
    <div></div>
    <div></div>
</div>

如果元素發(fā)生了層疊，層疊等級(jí)大的會(huì)覆蓋小的；如果二者層疊等級(jí)相同，根據(jù)渲染的順序，后者會(huì)覆蓋前者。

例子：

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        padding: 10px;
        overflow: hidden;
    }
    
    .f div:first-of-type,
    .f div:last-of-type {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        float: left;
    }
    
    .f div:last-of-type {
        background-color: rgba(221, 221, 255, .8);
        border: 1px dashed #000099;
        margin-top: -40px;
        margin-left: 30px;
    }
</style>

<div class="f">
    <div></div>
    <div></div>
</div>

z-index 可以影響層疊等級(jí)

如果需要修改元素的層疊等級(jí)，可以在已定位的元素(1)上使用 z-index。

z-index 可以取正整數(shù)，0 或負(fù)整數(shù)；如果沒(méi)有 z-index （默認(rèn) z-index:auto ）或者 z-index 手動(dòng)設(shè)置為 auto，則視為 0 處理。

*(1)指 position 值為 relative、absolute 或 fixed 的元素。

例子：

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        padding: 10px;
        position: relative;
        z-index: 0;
    }
    
    .f div:first-of-type,
    .f div:last-of-type {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        margin-left: 10px;
    }
    
    .f div:last-of-type {
        background-color: rgba(221, 221, 255, .8);
        border: 1px dashed #000099;
        margin-left: 30px;
        position: absolute;
        top: 14px;
        /* z-index: -1; */
    }
    
    label {
        background-color: rgba(247, 236, 27, 0.8);
        border: 1px dashed #FFC107;
        padding: 5px;
    }
</style>

<div class="f">
    <label>hello</label>
    <div></div>
    <div></div>
</div>

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

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

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

z-index 與層疊上下文

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

  • html 元素默認(rèn)創(chuàng)建的，稱為根層疊上下文，所有元素都會(huì)置于這個(gè)層上。
  • position 值為 relative 或 absolute，且 z-index 值不是 auto(1)。
  • position 值為 fixed。
  • CSS3 新屬性，比如 opacity 值不是 1、 transform 值不是 none、z-index 值不是 auto 的 flex 和 grid 布局元素等等。

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

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

例子：

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        height: 80px;
        position: relative;
        margin-bottom: 10px;
    }
    
    .f_1>div {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 150px;
        height: 200px;
        position: absolute;
        top: 20px;
        left: 170px;
    }
    
    .f_2>div {
        background-color: rgba(221, 221, 255, .8);
        border: 1px dashed #000099;
        width: 200px;
        height: 70px;
        position: absolute;
        top: 65px;
        left: 50px;
    }
</style>

<div class="f f_1">#1
    <div>#3
    </div>
</div>
<div class="f f_2">#2
    <div>#4
    </div>
</div>

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

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

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

此時(shí)，父元素#1、#2并沒(méi)有設(shè)置 z-index 值，因此它們不會(huì)創(chuàng)建新的層疊上下文，這意味著#3、#4仍然同屬于根層疊上下文。
同一層疊上下文，層疊等級(jí)大的會(huì)覆蓋小的，所以#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的子元素，其層疊等級(jí)完全受制于#2的等級(jí)。#2和#3同屬于根層疊上下文，且#3大于#2，因此#3在#2（及其子元素）之上。

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

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

例子：

<style>
    .f {
        background-color: rgba(204, 255, 204, .8);
        border: 1px dashed #669966;
        padding: 10px;
    }
    
    .f div {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        position: relative;
        top: 45px;
        z-index: -1;
    }
</style>

<div class="f">
    <div></div>
</div>

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

例子：

<style>
    .f {
        background-color: rgba(204, 255, 204, .8);
        border: 1px dashed #669966;
        padding: 10px;
        position: relative;
        z-index: 0;
    }
    
    .f div {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        position: relative;
        top: 45px;
        z-index: -1;
    }
</style>

<div class="f">
    <div></div>
</div>

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

到此這篇關(guān)于css 層疊與z-index的示例代碼的文章就介紹到這了,更多相關(guān)css 層疊與z-index內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論