|
控制“定位”元素的叠放层级 语法：z-index:值 取值： 1.数字： 正数，数字越大，层级越高，离用户越近 负数，数字越小，层级越低，离用户越远 2.auto：（默认值）和父元素层级相同 3.正数比auto大，负数比auto小 - <head>
- <meta charset="utf-8" />
- <title></title>
- <style type="text/css">
- /* 两个盒子都设置相对定位并偏移，中间有重叠的部分，默认后设置的会覆盖先设置的 */
- .box{
- width:100px;
- height:100px;
- background:#f00;
- position:relative;
- top:50px;
- z-index:2;/* 设置层叠高一点，会覆盖后设置的 */
- }
- .box1{
- width:200px;
- height:200px;
- background:#0f0;
- position:relative;
- left:50px;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- <div class="box1"></div>
- </body>
总结： 1.z-index只针对定位元素有效果（但不包括静态定位） 2.z-index值越大，层级越高 3.如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的 出题：上大盒子压住下大盒子 ，下大盒子里面的子元素压住上盒子。 | 
