站長資訊網
本篇文章給大家分享一下css的z-index權重問題。到底怎么樣才能讓我們想要排在上面的元素能在上面，想在下面的元素就老老實實的在下面。
一、一起看下面實戰中z-index的幾種情況：
-
一個定義了定位，一個沒定義定位，誰在上面？
-
一個父級盒子定位，一個不定位，不定位的子級設置定位，誰在上面？
-
一個父級盒子定位，一個不定位，不定位的子級設置定位，并給定位的子級元素加z-index，誰在上面？
-
倆個都定位，但是都不設置z-index，誰在上面？
-
倆個都定位，一個設置z-index為1，誰在上面？
二、設置基本的dom結構與樣式，準備測試
定義一下基本的dom結構：
<!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>
三、開始測試
測試問題1：
一個定義了定位，一個沒定義定位，誰在上面？
我們給box2設置定位并改變它的位置
.box2 { background: aqua; position: fixed; left: 100px; top: 30px; }
效果：
box2跑到了box1的上面。
測試問題2：
一個父級盒子定位，一個不定位，不定位的子級設置定位，誰在上面？
我們給box1盒子里的redp設置定位
.redp { background: red; position: fixed; }
效果：
box2還是在box1的上面。也在box1的定位子元素上面。
測試問題3：
一個父級盒子定位，一個不定位，不定位的子級設置定位，并給定位的子級元素加z-index，誰在上面？
我們給box1盒子里的redp追加z-index
.redp { background: red; position: fixed; z-index: 1; }
效果：
redp在最上面，box2在中間，box1在最下面。
測試問題4：
倆個都定位，但是都不設置z-index，誰在上面？
我們首先恢復我們初始的樣式代碼然后重新改。
在初始的代碼里更改box1與box2的樣式
.box1 { background: yellow; position: fixed;}.box2 { background: aqua; position: fixed; left: 100px; top: 30px;}
效果：
box2在box1的上面
測試問題5：
倆個都定位，一個設置z-index為1，誰在上面？
我們吧box1的z-index設置為1：
.box1 { background: yellow; position: fixed; z-index: 1;}
效果：
box1跑到了box2的上面
四、結論
- 定位的元素在沒定位的元素上面
- 同樣定位了后面的元素在前面的元素上面
- 同級的父級都定位了【就不看子級了】，誰的z-index高誰在上面
- 一個父級定位了，另一個父級沒定位，沒定位的元素的子級定位了，那就按照定位的子級和定位的父級看誰的z-index高誰在上面。
