思路:
①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 class="red"></div> 63 <div class="blue"></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>
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
