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，会造成左边区域不可点击。

  <div class="g-bd1 f-cb">
    <div class="g-sd1">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn1">
        <div class="g-mn1c">
            <p>右侧自适应</p>
        </div>
    </div>
</div>

/* 两列右侧自适应布局 */
.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
  <div class="div">
    ![](https://img.haomeiwen.com/i1975863/f1c832ca67a391af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </div>
  
  <div class="div absdiv">
    ![](https://img.haomeiwen.com/i1975863/f1c832ca67a391af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </div>

// 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
  <span class="normal">normal</span>
  <span class="fl">float left</span>
  <span class="abs">position absolute</span>

  //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
  <div class="divdes">
    ![](https://img.haomeiwen.com/i1975863/f1c832ca67a391af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </div>
  
  <div class="divdes">
    ![](https://img.haomeiwen.com/i1975863/f1c832ca67a391af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </div>

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

Paste_Image.png