css的relative、absolute和float

前言总结

1. 绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中
2. 浮动就是个带有方位的display:inline-block属性，absolute也是个inline-block化属性。

z-index

position:relative、position:absolute和position:fixed参与的情况下才有作用，表示层级

relative的特性

没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，其原始占位信息仍存在。
它可以提升元素的z-index层级，如下面的两列布局。如果左边不设置position:relative，会造成左边区域不可点击。

  

    

        
左侧定宽
    
    

        

            
右侧自适应
        
    


/* 两列右侧自适应布局 */
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-mn1{float:right;width:100%;}
.g-mn1c{margin-left:200px;}

absolute的特性

包裹性

简单点就是元素inline-block化，如一个div默认宽度为100%，一旦被设置absolute属性，那么100%默认宽度会变成内部自适应的宽度：

  // html
  

    ![](http://upload-images.jianshu.io/upload_images/1975863-f1c832ca67a391af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  
  
  

    ![](http://upload-images.jianshu.io/upload_images/1975863-f1c832ca67a391af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

// css
.div{
  background-color: #0f9345;
  padding: 20px;
  margin: 10px 0;
}
.absdiv{
  position: absolute;
}

得到的结果图：

normal和absolute

float也是典型的inline-block化，正常情况下我们要给行内元素设置宽高需要设置display：block属性，但是设置float或者absolute属性后，display：block就可以省了：

  // html
  normal
  float left
  position absolute

  //css
  .normal{
  display: block;
  width: 100px;
  height: 100px;
  background-color: red
}
.fl{
  float: left;
  width: 100px;
  height: 100px;
  background-color: yellow
}
.abs{
  position:absolute;
  width: 100px;
  height: 100px;
  background-color: green
}

Paste_Image.png

破坏性

浮动的破坏性在于切断line box链，致使高度塌陷，但其占据的实体位置还是在的。而absolute绝对定位不占据文档流的实体位置，因此会造成高度和宽度的塌陷。

  // html
  

    ![](http://upload-images.jianshu.io/upload_images/1975863-f1c832ca67a391af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  
  
  

    ![](http://upload-images.jianshu.io/upload_images/1975863-f1c832ca67a391af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

// css
.divdes{
  padding: 20px;
  margin: 10px;
  float:left;
  background-color: #0f9345;
}
.abs{
  position: absolute;
}

Paste_Image.png