小編給大家分享一下css z-index的權(quán)重問題分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
從事綿陽(yáng)機(jī)房托管,服務(wù)器租用,云主機(jī),網(wǎng)頁(yè)空間,域名注冊(cè),CDN,網(wǎng)絡(luò)代維等服務(wù)。一個(gè)定義了定位,一個(gè)沒定義定位,誰(shuí)在上面?
一個(gè)父級(jí)盒子定位,一個(gè)不定位,不定位的子級(jí)設(shè)置定位,誰(shuí)在上面?
一個(gè)父級(jí)盒子定位,一個(gè)不定位,不定位的子級(jí)設(shè)置定位,并給定位的子級(jí)元素加z-index,誰(shuí)在上面?
倆個(gè)都定位,但是都不設(shè)置z-index,誰(shuí)在上面?
倆個(gè)都定位,一個(gè)設(shè)置z-index為1,誰(shuí)在上面?
定義一下基本的dom結(jié)構(gòu):
Document
一個(gè)定義了定位,一個(gè)沒定義定位,誰(shuí)在上面?
我們給box2設(shè)置定位并改變它的位置
.box2 { background: aqua; position: fixed; left: 100px; top: 30px; }
效果:
box2跑到了box1的上面。
一個(gè)父級(jí)盒子定位,一個(gè)不定位,不定位的子級(jí)設(shè)置定位,誰(shuí)在上面?
我們給box1盒子里的redp設(shè)置定位
.redp { background: red; position: fixed; }
效果:
box2還是在box1的上面。也在box1的定位子元素上面。
一個(gè)父級(jí)盒子定位,一個(gè)不定位,不定位的子級(jí)設(shè)置定位,并給定位的子級(jí)元素加z-index,誰(shuí)在上面?
我們給box1盒子里的redp追加z-index
.redp { background: red; position: fixed; z-index: 1; }
效果:
redp在最上面,box2在中間,box1在最下面。
倆個(gè)都定位,但是都不設(shè)置z-index,誰(shuí)在上面?
我們首先恢復(fù)我們初始的樣式代碼然后重新改。
在初始的代碼里更改box1與box2的樣式
.box1 { background: yellow; position: fixed;}.box2 { background: aqua; position: fixed; left: 100px; top: 30px;}
效果:
box2在box1的上面
倆個(gè)都定位,一個(gè)設(shè)置z-index為1,誰(shuí)在上面?
我們吧box1的z-index設(shè)置為1:
.box1 { background: yellow; position: fixed; z-index: 1;}
效果:
box1跑到了box2的上面
定位的元素在沒定位的元素上面
同樣定位了后面的元素在前面的元素上面
同級(jí)的父級(jí)都定位了【就不看子級(jí)了】,誰(shuí)的z-index高誰(shuí)在上面
一個(gè)父級(jí)定位了,另一個(gè)父級(jí)沒定位,沒定位的元素的子級(jí)定位了,那就按照定位的子級(jí)和定位的父級(jí)看誰(shuí)的z-index高誰(shuí)在上面。
以上是“css z-index的權(quán)重問題分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!