css z-index知多少

一、z-index基础内容（入门）

1.z-index 含义

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

2.z-index 支持的属性值

• z-index:auto; 默认值
• z-index:int； 整数值
• z-index:inherit;继承父元素的z-index属性值

3.z-index的特性

• 支持负值
• 支持css3 animation动画
• 在css2.1时代，需要和定位元素配合使用

4.特殊点

如果不考虑css3 ,只有标记了定位元素position的z-index 才有作用，但是css3 中有例外

{
   
  position：static;z-index:2; 
}
{
   
  position：relative;z-index:2;
}
{
   
  position：absolute;z-index:2;
}
{
   
  position：fixed;z-index:2;
}
{
   
  position：sticky;z-index:2;
}

static:元素使用正常的布局行为，即元素在文档常规流中当前的布局位置

二、多个定位元素（应用）

1.如果定位元素z-index 没有嵌套

①后来居上的准则
②哪个大，哪个上

  
 .one {
   
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: #ccc;
      }
      .two {
   
        position: absolute;
        top: 50px;
        left: 50px;
        width: 300px;
        height: 300px;
        background-color: pink;
      }
<div class="one">one</div>
<div class="two">two</div>

①后来居上 （即默认按照dom元素排列的先后顺序，靠后的dom元素排列居上）

 .one {
   
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: #ccc;
        z-index: 2;
      }
      .two {
   
        position: absolute;
        top: 50px