css定位机制

在css中定位机制包括：标准流，定位和浮动

       标准流：除非专门指定，否则所有元素都在标准流中定位。也就是说，标准 流中的元素的位置由元素在HTML中的位置决定。块级元素从上到下一个接一个地排，列行内框在一行中水平布置。很明显这样生硬的规定是不灵活的，好比你玩 俄罗斯方块不让你变换元素的方向直接堆放一样。所以，也就有了定位。

       定位：又分为相对定位和绝对定位。

       相对定位是指将元素从标准流中移动出来，即相对于它原来的位置进行偏移。但是它依然在标准流中占据着它原来的位置，因此相对其他元素而言它还是在原来的位置上。因此，偏移后的元素也就会覆盖在其他的元素上！那么实例代码如下，其效果如图：

#box_relative {
  position: relative;    /*relative是相对定位的关键字*/
  left: 30px;
  top: 20px;
}

        绝对定位的思想是和相对定位是一样的，即移动某个元素使其出现在独立于标准流之外的地方。而区别则在于，绝对定位不再在标准流中保存元素原来的位置。也就是说，在其他元素来看它是不存在的，它移动之后原来的位置将被别的元素取代。其代码如下，效果如图：

<span style="font-size:18px;">#box_relative {
  position: absolute;/*absolute为绝对定位关键字*/
  left: 30px;
  top: 20px;
}
</span>

 

       这里因为定位的原因出现的元素覆盖的问题，Css还提供了一个属性Z-index来调整元素的叠放次序。

       浮动：浮动是指把元素从表准流中独立出来，向左或者向右移动直到碰到另一个元素的边框。因为其脱离了标准流，那么在其他元素看来它就不存在了，于是它的位置会被顶替。如图所示：