css总结：HTML中用position进行相对定位时与float属性连用容易产生的误区

最近写静态网时将position与float属性连用，结果发现没有达到预期的效果（预期的设想是两个块彼此相连，而结果却是相互重叠了）

本人健忘，故将此记录下来，以下是我从中获取经验。

首先来看一个图示：

好的，假设我们有了两个块div1与div2,它们在样式表中我们分别对其设置为：

div1{width:100px;height:30px;background:red;position:relative;left:128px;float:left}

div2{width:100px;height:30px;background:green;position:relative;left:2px;float:left}

注：relative即相对定位，即相对正常位置进行定位。

那好，在这个前提之下，我不知道大家有没有对其产生误解，反正我是误解了，我的理解是：既然它说了相对正常位置，那好，我们先将div2撇开一边，div1应该是距页面左边界128px的距离，如果div2没有设置相对定位，即在上述设置中的“position:relative;left:2px;”删除，那么div2应该紧挨着div1才对是不是。

现在，问题来了，很显然啊，这不就是div2的正常位置吗，那么按理来说div2应该距div1有2px的距离紧挨div1才对呀，结果不然，其结果如下示图：

我们会发现，div2将div1覆盖了一部分。

现在，让我们来解释一下：

其实很简单，其实它说的正常位置也并非错误，只不过他的正常位置是抛却position:relative的正常位置，什么意思呢？就是说，它的正常位置就是没有受“position:relative”影响下的位置，通俗的讲，就是不存在“position:relative”的前提下它们所在的位置。

如果就div1来讲，如果没有设定“position:relative”，就应该仅靠边界才对，如示图：

而设置了之后，应该是这样的：

那么就div1和div2来讲，如果两个块均未设置相对定位，两个块应该紧挨在一起，且div1紧挨页面边界，如示图：

而这就是对于上述设置而言两个块的正常位置，也就是说两个块均是相对于上述其各自的位置而进行定位的，也就说我想达到我预想的效果，则需将div2设置为：div2{width:100px;height:30px;background:green;position:relative;left:130px;float:left}，如示图：

最后，有什么不对的地方请指出，谢谢！