元素float，relative，absolute，fixed之后层级的高低浅析

主要记录的是谁覆盖谁的问题。测试环境chrome浏览器

• 元素float——一个元素浮动，另一个元素不浮动

  

    

      son
      span
    
    
son2
  

 来段css

    .parent {
      position: relative;
    }

    .son {
      width: 200px;
      height: 200px;
      background: #f00;
      border: 1px solid #000;
    }

    .son2 {
      background: #ff0;
    }

 效果

现在给son1添加浮动

    .son2 {
      background: #ff0;
      margin-left: 70px;
    }

 结果黄色的son2被红色的覆盖了，所以浮动元素脱离了文档流，z-index大于不浮动的元素

• 元素float——两个都浮动

    .son2 {
      background: #ff0;
      float: left;
      margin-left: -30px;
    }

    .son1 {
      float: left;
    }

 后面的元素层级比前面的z-index高

• position的几种情况

    
son3
    
son4

css如下

  .son3 {
      background: #f0f;
      position: static;
    }

    .son4 {
      position: relative;
      margin-top: -30px;
    }

relative的层级大于static默认的层级 

当都为relative的时候，后面的也会覆盖前面的，此时我们让z-index出场,

注意：z-index只在position设置了relative还有absolute，fixed后生效。

    .son3 {
      background: #f0f;
      position: relative;
    }

    .son4 {
      position: relative;
      margin-top: -60px;
    }

 son3覆盖了son4,son3的z-index比son4的默认0大

son3设置absolute后，被后面的son4覆盖了，没有z-index参与的时候，absolute的层级比position的层级低

son3设置absolute后，再设置z-index，son3覆盖了son4

元素float,relative还有absolute的层级问题

浮动的元素比static元素层级高

浮动的元素比relative元素层级低

浮动的元素比absolute,fixed元素层级低

最后的总结:

1.浮动元素的z-Index大于不浮动的

2.都浮动的元素，html文档里面后面的元素z-index大于前面的

3.float的元素，比默认的static原色z-index大

4.float元素，比relative，absolute，fiexed小

5.子元素在牛逼也要看父元素的z-index

 有错误的地方，欢迎批评指正，总结的比较浅显！！