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

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

cssz-index的權(quán)重問題分析-創(chuàng)新互聯(lián)

小編給大家分享一下css z-index的權(quán)重問題分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

從事綿陽(yáng)機(jī)房托管,服務(wù)器租用,云主機(jī),網(wǎng)頁(yè)空間,域名注冊(cè),CDN,網(wǎng)絡(luò)代維等服務(wù)。

一、一起看下面實(shí)戰(zhàn)中z-index的幾種情況:

  • 一個(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í)在上面?

二、設(shè)置基本的dom結(jié)構(gòu)與樣式,準(zhǔn)備測(cè)試

定義一下基本的dom結(jié)構(gòu):

css z-index的權(quán)重問題分析




    
    
    
    Document
    


    
        
    
    
        
    

三、開始測(cè)試

測(cè)試問題1:

一個(gè)定義了定位,一個(gè)沒定義定位,誰(shuí)在上面?

我們給box2設(shè)置定位并改變它的位置

.box2 {
   background: aqua;
   position: fixed;
   left: 100px;
   top: 30px;
}

效果:

box2跑到了box1的上面。

css z-index的權(quán)重問題分析

測(cè)試問題2:

一個(gè)父級(jí)盒子定位,一個(gè)不定位,不定位的子級(jí)設(shè)置定位,誰(shuí)在上面?

我們給box1盒子里的redp設(shè)置定位

.redp {
   background: red;
   position: fixed;
   }

效果:

box2還是在box1的上面。也在box1的定位子元素上面。

css z-index的權(quán)重問題分析

測(cè)試問題3:

一個(gè)父級(jí)盒子定位,一個(gè)不定位,不定位的子級(jí)設(shè)置定位,并給定位的子級(jí)元素加z-index,誰(shuí)在上面?

我們給box1盒子里的redp追加z-index

.redp {
   background: red;
   position: fixed;
   z-index: 1;
   }

效果:
redp在最上面,box2在中間,box1在最下面。

css z-index的權(quán)重問題分析

測(cè)試問題4:

倆個(gè)都定位,但是都不設(shè)置z-index,誰(shuí)在上面?

我們首先恢復(fù)我們初始的樣式代碼然后重新改。
在初始的代碼里更改box1與box2的樣式

.box1 {
    background: yellow;
    position: fixed;}.box2 {
    background: aqua;
    position: fixed;
    left: 100px;
    top: 30px;}

效果:
box2在box1的上面
css z-index的權(quán)重問題分析

測(cè)試問題5:

倆個(gè)都定位,一個(gè)設(shè)置z-index為1,誰(shuí)在上面?

我們吧box1的z-index設(shè)置為1:

.box1 {
    background: yellow;
    position: fixed;
    z-index: 1;}

效果:
box1跑到了box2的上面
css z-index的權(quán)重問題分析

四、結(jié)論

  • 定位的元素在沒定位的元素上面

  • 同樣定位了后面的元素在前面的元素上面

  • 同級(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è)資訊頻道!


本文題目:cssz-index的權(quán)重問題分析-創(chuàng)新互聯(lián)
分享路徑:http://weahome.cn/article/dpspjd.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部