欢迎光临
我的个人博客网站

z-index的特点

思路:
①z-index的结构/定位元素默认的z-index
②z-index单位
③能不能用子元素和父元素比较
④父元素没有z-index,能不能通过子元素控制他们的层级=>改变层级,父元素z-index
z-index属性的特点

  1. 默认是书写顺序在后的定位元素覆盖在顺序前的定位元素
  2. 可以使用z-index属性修改定位元素的层级关系
  3. 所有定位元素的z-index默认值都是一样的
  4. z-index值是数字没有单位,支持负数
  5. 一般都是同级元素进行层级的比较

当参照物是相对定位或绝对定位的时候,父级元素之间没有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>

赞(0) 打赏
未经允许不得转载:张拓的天空 » z-index的特点
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏