思路:
①z-index的結構/定位元素默認的z-index
②z-index單位
③能不能用子元素和父元素比較
④父元素沒有z-index，能不能通過子元素控制他們的層級=>改變層級，父元素z-index
z-index屬性的特點
- 默認是書寫順序在后的定位元素覆寫在順序前的定位元素
- 可以使用z-index屬性修改定位元素的層級關系
- 所有定位元素的z-index默認值都是一樣的
- z-index值是數字沒有單位,支持負數
- 一般都是同級元素進行層級的比較
當參照物是相對定位或絕對定位的時候,父級元素之間沒有z-index值,子級元素的z-index 值會出來做比較
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /* 8 z-index的特點 9 1.都有定位元素的標簽 在后面的標簽的z-index要比在前面的z-index的值要大 10 z.z-index沒有單位 支持負值 11 3.z- index一般都是同級元素的比較 子元素和父元素去比較z-index并不遵 12 循我們說的規律:值越大越在上(我們一般不會拿子元素去跟他的父元素去比較 13 z-index的大小) 14 4.z-index屬性不能繼 15 */ 16 .red{ 17 width: 200px; 18 height: 200px; 19 background-color: red; 20 position: absolute; 21 z-index: -1; 22 } 23 .blue{ 24 width: 400px; 25 height: 400px; 26 background-color: blue; 27 position: absolute; 28 z-index: 9; 29 } 30 .wrap{ 31 width: 500px; 32 height: 500px; 33 background-color: #ccc; 34 position: relative; 35 z-index: 99; 36 } 37 38 .parent1{ 39 position:absolute; 40 width: 200px; 41 height: 200px; 42 background-color: #A52A2A 43 } 44 .parent2{ 45 position:absolute; 46 width: 300px; 47 height: 400px; 48 background-color: #FF00FF 49 } 50 .son1,.son2{ 51 position: relative; 52 } 53 .son1{ 54 z-index: 9; 55 } 56 .son2{ 57 z-index: 10; 58 } 59 </style> 60 </head> 61 <body> 62 <!-- <div ></div> 63 <div ></div> --> 64 <div class="wrap"> 65 <div class="blue"></div> 66 <div class="red"></div> 67 </div> 68 69 <div class="parent2"> 70 <div class="son2"></div> 71 </div> 72 <div class="parent1"> 73 <div class="son1"></div> 74 </div> 75 </body> 76 </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/246473.html
標籤：Html/Css
上一篇：水平垂直居中深入挖掘
下一篇：CSS學習筆記