国产av一区二区三区最新精品,ass少妇pics粉嫩bbw,国产av麻豆mag剧集

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

css - 子元素的z-index如何高于父元素的兄弟元素的z-index值？

伊謝爾倫 2017-06-20 10:06:21

2574

1.文字描述如下：

有A、B兩個(gè)同級(jí)p，A的z-index為888，B的z-index為999，A下有H，z-index為1000,但是發(fā)現(xiàn)H并沒有在B的上層，不改變層次結(jié)構(gòu)能否使H在B的上層？

2.代碼描述如下

<p class='A' style="background-color:rgba(0, 0, 0, 0.9);position: absolute;z-index: 888;">
    <h1 class='H' style="position: absolute;color: #fff;z-index: 1000;display: block;">
        This is a heading
    </h1>
</p>

<p class='B' style="position: absolute;height: 100%;width: 100%;background: #000;z-index: 999;"></p>

3.可以改變?nèi)我鈽邮?，但是不能改變（A>H,B）的層次結(jié)構(gòu)以及他們的z-index，如何使得H在B之上?

4，劃重點(diǎn)?。。?！

僅不能改變（A>H,B）的層次結(jié)構(gòu)以及他們的z-index，其他style隨便，包括但不限于position、width，height隨便改，隨便加，隨便減”
僅不能改變（A>H,B）的層次結(jié)構(gòu)以及他們的z-index，其他style隨便，包括但不限于position、width，height隨便改，隨便加，隨便減”
僅不能改變（A>H,B）的層次結(jié)構(gòu)以及他們的z-index，其他style隨便，包括但不限于position、width，height隨便改，隨便加，隨便減”

伊謝爾倫

小伙看你根骨奇佳，潛力無限，來學(xué)PHP伐。

全部回復(fù)(6)

學(xué)習(xí)ing2017-06-20 10:08:21 6 樓

根據(jù)規(guī)范，z-index是應(yīng)用到定位元素的，也就是position屬性不為relative的元素，否則，設(shè)置z-index是沒有意義的；
z-index的作用有兩點(diǎn)，一是設(shè)置在當(dāng)前堆疊上下文(stacking context)中的層級(jí)；二是創(chuàng)建一個(gè)新的堆疊上下文；
z-index并不是設(shè)置的值越高，就會(huì)越靠近用戶，還和堆疊上下文有關(guān)系；

在同一個(gè)堆疊上下文中的元素，z-index越高越靠近用戶；
在不同堆疊上下文中的元素，如果堆疊上下文一距離用戶更近，那么它的所有子元素都在另一個(gè)堆疊上下文子元素的前面，也就是離用戶更近，不同堆疊上下文中的子元素不可能發(fā)生交叉；
所以，z-index其實(shí)不是一個(gè)絕對值，而是一個(gè)相對值；

舉例如下：

    <body>
        <p class="p1">
            <p class="p1p1">
                <p class="p1p1p1"></p>
            </p>
        </p>
        <p class="p2">
            <p class="p2p1"></p>
        </p>
    </body>

body {
    margin: 0;
}

.p1 {
    width: 700px;
    height: 700px;
    background: red;
}

.p1p1 {
    width: 300px;
    height: 300px;
    background: green;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 500;
}

.p1p1p1 {
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    z-index: 10;
}

.p2 {
    width: 600px;
    height: 600px;
    background: pink;
    position: absolute;
    z-index: 400;
    top: 0;
}

.p2p1 {
    width: 500px;
    height: 500px;
    background: blueviolet;
    position: absolute;
    z-index: 800;
}

對于.p1p1p1和.p2p1，雖然后者的z-index(800)高于前者(10)，但是因?yàn)榍罢咚诘亩询B上下文(.p1p1)的z-index(500)高于后者所在的堆疊上下文(.p2p1)的z-index(400)，所以前者是在后者上面的。

評(píng)論里面你設(shè)置p{z-index:9;position:relative;}會(huì)建立一個(gè)新的堆疊上下文，和p同級(jí)的元素是0，img元素是9 -1，因?yàn)?>0，所以img是在上面的。

按照你的題目，其實(shí)position屬性是不能改的，如果把position屬性改為relative，那你的z-index屬性其實(shí)就不起作用了，在z-index都起作用的情況下，是沒有辦法達(dá)到你的要求的，理由如下：

A 888
H 888 1000
B 999

A, B和H的層級(jí)如上，因?yàn)?88 < 999，所以A和H都在B的下邊。

點(diǎn)贊 +0

添加回復(fù)

扔個(gè)三星炸死你2017-06-20 10:08:21 5 樓

不能。因?yàn)槟愕腍和B都是position: absolute，可以認(rèn)為，絕對定位的元素在z軸上的偏移量遠(yuǎn)遠(yuǎn)大于z-index可以設(shè)置的量（可以認(rèn)為絕對定位元素有著無窮大的z偏移）。因此，H和B兩個(gè)元素的z-index實(shí)際上并不起到任何作用。

去掉了position: absolute之后，代碼如下

<p class='A' style="background-color:blue;height:100px;margin-bottom: -200px;padding: 30px;display:block;z-index: 888;">
    <h1 class='H' style="color: #fff;z-index: 1000;margin-top: 60px;display: block;">
        This is a heading
    </h1>
</p>

<p class='B' style="height: 100%;width: 100%;background: #000;z-index: 999;"></p>

效果：