站長(zhǎng)資訊網(wǎng)
本篇文章給大家分享一下css的z-index權(quán)重問(wèn)題。到底怎么樣才能讓我們想要排在上面的元素能在上面，想在下面的元素就老老實(shí)實(shí)的在下面。
一、一起看下面實(shí)戰(zhàn)中z-index的幾種情況：
-
一個(gè)定義了定位，一個(gè)沒(méi)定義定位，誰(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)：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * {margin: 0;padding: 0;} .box1, .box2 { width: 500px; height: 200px; border: 2px solid; margin: 10px; } .box1 { background: yellow; } .box2 { background: aqua; } .redDiv, .blueDiv { width: 150px; height: 150px; } .redDiv { background: red; } .blueDiv { background: blue; } </style> </head> <body> <div> <div></div> </div> <div> <div></div> </div> </body> </html>
三、開(kāi)始測(cè)試
測(cè)試問(wèn)題1：
一個(gè)定義了定位，一個(gè)沒(méi)定義定位，誰(shuí)在上面？
我們給box2設(shè)置定位并改變它的位置
.box2 { background: aqua; position: fixed; left: 100px; top: 30px; }
效果：
box2跑到了box1的上面。
測(cè)試問(wèn)題2：
一個(gè)父級(jí)盒子定位，一個(gè)不定位，不定位的子級(jí)設(shè)置定位，誰(shuí)在上面？
我們給box1盒子里的redp設(shè)置定位
.redp { background: red; position: fixed; }
效果：
box2還是在box1的上面。也在box1的定位子元素上面。
測(cè)試問(wèn)題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在最下面。
測(cè)試問(wèn)題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的上面
測(cè)試問(wèn)題5：
倆個(gè)都定位，一個(gè)設(shè)置z-index為1，誰(shuí)在上面？
我們吧box1的z-index設(shè)置為1：
.box1 { background: yellow; position: fixed; z-index: 1;}
效果：
box1跑到了box2的上面
四、結(jié)論
- 定位的元素在沒(méi)定位的元素上面
- 同樣定位了后面的元素在前面的元素上面
- 同級(jí)的父級(jí)都定位了【就不看子級(jí)了】，誰(shuí)的z-index高誰(shuí)在上面
- 一個(gè)父級(jí)定位了，另一個(gè)父級(jí)沒(méi)定位，沒(méi)定位的元素的子級(jí)定位了，那就按照定位的子級(jí)和定位的父級(jí)看誰(shuí)的z-index高誰(shuí)在上面。
