css - 子元素的z-index如何高于父元素的兄弟元素的z-index值？
問(wèn)題描述
1.文字描述如下：
有A、B兩個(gè)同級(jí)p，A的z-index為888，B的z-index為999，A下有H，z-index為1000,但是發(fā)現(xiàn)H并沒(méi)有在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)我鈽邮剑遣荒芨淖儯ˋ>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隨便改，隨便加，隨便減”
問(wèn)題解答
回答1：
根據(jù)規(guī)范，z-index是應(yīng)用到定位元素的，也就是position屬性不為relative的元素，否則，設(shè)置z-index是沒(méi)有意義的；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è)絕對(duì)值，而是一個(gè)相對(duì)值；
舉例如下：
<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;}
對(duì)于.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都起作用的情況下，是沒(méi)有辦法達(dá)到你的要求的，理由如下：
A 888H 888 1000B 999
A, B和H的層級(jí)如上，因?yàn)?88 < 999，所以A和H都在B的下邊。
回答2：不能。因?yàn)槟愕腍和B都是position: absolute，可以認(rèn)為，絕對(duì)定位的元素在z軸上的偏移量遠(yuǎn)遠(yuǎn)大于z-index可以設(shè)置的量（可以認(rèn)為絕對(duì)定位元素有著無(wú)窮大的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>
效果：
首先A,B,H都是絕對(duì)定位，然后z-index,B>A了，自然而然，B就擋住了A，H在A里面，又是絕對(duì)定位于A，自然也就擋住H了，解決方法就是設(shè)置z-index,A>B就行了。這樣布局，H的z-index，沒(méi)有實(shí)在的意義(只要遮住了A，也就遮住了H)！除非H不在A里面！
回答4：可以想象成每一個(gè)元素的z-index都聲明了一個(gè)平面世界，平面世界的高度就是z-index的值。 而子元素的z-index都是在這個(gè)世界相比較。
回答5：如果外面的z-index前者小于后者，沒(méi)有辦法讓前者的子節(jié)點(diǎn)超過(guò)后者，只能改變層級(jí)，不過(guò)這樣子的話，前者就可能把后者全都檔住了，所以樓主還是把H從A中拿出來(lái)對(duì)應(yīng)的層級(jí)設(shè)置好就能達(dá)到效果了
回答6：不能父級(jí)限制了子元素的 位置
相關(guān)文章：
1. mysql 查詢身份證號(hào)字段值有效的數(shù)據(jù)2. 視頻文件不能播放，怎么辦？3. node.js - nodejs開發(fā)中常用的連接mysql的庫(kù)4. python bottle跑起來(lái)以后,定時(shí)執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?5. mysql - 把一個(gè)表中的數(shù)據(jù)count更新到另一個(gè)表里?6. 請(qǐng)教使用PDO連接MSSQL數(shù)據(jù)庫(kù)插入是亂碼問(wèn)題?7. mysql - 分庫(kù)分表、分區(qū)、讀寫分離 這些都是用在什么場(chǎng)景下 ，會(huì)帶來(lái)哪些效率或者其他方面的好處8. python - 爬蟲模擬登錄后，爬取csdn后臺(tái)文章列表遇到的問(wèn)題9. visual-studio - Python OpenCV: 奇怪的自動(dòng)補(bǔ)全問(wèn)題10. Python爬蟲如何爬取span和span中間的內(nèi)容并分別存入字典里？
網(wǎng)公網(wǎng)安備