CSS布局--浮动与定位

每个网页都可以看成是由一层一层页面堆叠起来的，如下图所示。

元素堆叠

把元素往 Z 轴方向移了一层，元素将脱离普通流，不再占据原本文档流那层的空间，还会覆盖下层的元素。

• 相对定位，设置了 position:relative 的元素；会发生：

  • position 设置为 relative 的时候，元素依然在普通流中，可以通过 left right 等属性相对于以前位置移动元素，偏移前的位置仍然保留（即同一文档流的其他元素无法占据原位置）。

• 设置了 position: absolute 或 fixed 的元素;会发生：

  1. 设置了 position: absolute/fixed 的元素，将脱离文档流，不再占据原本文档流那层的空间；
  2. 设置了* *position: absolute/fixed 的元素，会让元素变成行内块状元素，相当于给该元素设置了 display: inline-block；

3. 设置了 position: absolute 的元素在定位时将忽略其相对定位的元素的 padding。
4. 设置了 position: absolute 的元素设置的百分比的宽和高将针对其相对于定位的元素进行计算。

应用了position: relative/absolute/fixed的元素，margin属性仍然有效。

• 设置了 float : left/right 浮动的元素：

  1. 浮动元素会让父元素的高度缺失。
  2. 浮动就是个带有方位的 display:inline-block 属性。

• 同时设置了浮动和定位：

  1. 元素同时应用了position: relative（top / left / bottom / right）和 float: left/right 属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移；父元素仍无法获得此元素的高度；
  2. 元素同时应用了position: absolute和float: right/left 属性，则float失效。
  3. 第一个元素应用了 position 之后会覆盖着接下来的float: right/left 元素（如果两个元素所处的位置相同）。只有将float的元素的position设置成relative同时并设置较大得z-index值才能覆盖处于同一位置的position元素
     。

• 总结：

  1. position: absolute/fixed和 float: left/right 都会让元素 inline-block 化。
  2. float: left/right 致使父元素高度塌陷；position: absolute 致使父元素高度、宽度都塌陷（即脱离文档流）