css的定位机制

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

牛腩新闻发不系统中遇到了CSS（Cascading style sheets），第一次接触，比较陌生还！因为CSS很多关于元素定位的问题，并且很多情况下元素的位置以像素精度计。一个不小心就很头疼，为此还是很有必要了解一下元素的定位机制。那么在介绍定位机制之前呢，还是有必要先了解一些和位置有关的基本内容。

第一个需要了解的是盒子模型，在网页中所有的元素都是以盒子模型的方式存在的，即所有元素都可以看成是大小不一样的矩形“砖头”。在IE和Firefox中的开发人员工具中可以很直观的看到每个元素的盒子模型。ok了，有了以上的基本理解那么可以开始了。

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

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

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

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

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

#box_relative {
position: absolute;/*absolute为绝对定位关键字*/
left: 30px;
top: 20px;
}

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

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

本篇博客到此结束，关于CSS的东西估计还需要再写一篇博客！