z-index布局

1. Z-index的含义
2. 注意事项:
3. z-index的使用规则
4. 层叠上下文的概念
5. 层叠水平

1. Z-index的含义

Z-index属性指定了元素的Z顺序,而Z顺序可以决定当元素发生覆盖的时候,哪个元素在上面.通常一个较大的z-index值的元素会覆盖较低的那个.

2. 注意事项:

2.1. 在css2的标准中当设置position且值不能为static的情况下才生效
2.2. z-index的值可以为负值.

3. z-index的使用规则

如果定位元素z-index没有发生嵌套:
1.后来居上准则
2.哪个大那个上;

如果定位元素z-index发生嵌套:
祖先优先原则(前提:z-index值是数值,非auto)

    .box1,.box2{color: white;}
    .father1{position: relative;z-index: 1;}
    .father2{position: relative;z-index: 1;}
    .box1{width: 200px; height: 100px; background-color: red;  position:absolute;z-index: 2;text-align: right;}
    .box2{width: 200px; height: 100px; background-color: green;position: absolute;margin-left: 100px; z-index: 1;}  
   <div class="father1">
       <div class="box1">box1在上面</div> 
   </div>
   <div class="father2">
       <div class="box2">box2在上面</div> 
   </div>

4. 层叠上下文的概念

层叠上下文就是一个包含了一组堆叠层的元素。这可以是一个 html 元素创建的根层叠上下文，或者是一个由特定属性和值创建的局部层叠上下文。

.father{width: 300px; height: 200px; background-color: bisque;margin-left: 200px;} 
.son{width: 100px; height: 100px; background-color: green;position: absolute; z-index: -1;margin-left: -50px;}

   <div class="father">
       <div class="son"></div>
   </div>

如何创建层叠上下文:
1.根元素自带层叠上下文.
2.增加z-index且值非auto,可以创建层叠上下文.
3.当元素加了某些属性就会有层叠上下文.如opacity,filter等
以opacity举个例子:

    .father{width: 100%; height: 50px; background-color: #000;position: absolute;opacity: 0.5;} 
    .son{color: white;}
   <div class="father">
       <div class="son">首页</div>
   </div>
   <div class="banner">
       <img src="banner.jpg" alt="" width="100%">
   </div>

此时father里的元素永远会被透明.因为层叠上下文是.father.里面的元素再怎么加postion 加z-index也跳不出父元素的控制.

5. 层叠水平

层叠上下文中每一个元素都有一个层叠水平,决定了同一个层叠上下文中的元素在Z轴上的显示顺序.
遵循”后来居上”和”谁大谁上”的层叠准则.

层叠顺序:

7阶层叠水平(排列顺序自前向后,理解为显示顺序从前向后排.)
正z-index > z-index:auto(或看成z-index:0) >inline/inline-block > float > block块状水平盒子 > 负z-index > 层叠上下文中的background/border
层叠顺序图
z-index与层叠上下文

z-index:auto 和z-index:0 其值本身没啥区别.但是z-index:0会创建层叠上下文.而z-index:auto不会创建层叠上下文.

z-index层叠顺序的比较会止步于父级层叠上下文.

对于非浮层元素,避免设置z-index值,z-index值没有任何道理需要超过2个.