DIV的Position属性和嵌套显示

1.前言
我们在利用div+css进行布局时，常常被div的位置弄的焦头烂额，很多人甚至放弃了div而直接用table。这里一如既往的推荐使用div布局，其实我们只要掌握了div的position属性和div的float属性，布局是非常灵活的，这里详细说一下div的position，没想象中那么简单，也没想象中那么复杂。

2.position的四种取值
static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定
relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。
absolute:absolute绝对定位，直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。
fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie还不支持

3.relative,absolute,fixed需要指定具体位置
relative,absolute,fixed如果不指定它的top,left等属性，那么它的position实际上依然是static。使用了relative,absolute,fixed就必须指定具体的位置。

4.关于DIV的嵌套
我们设定外层div的名字为div1,内层div的名字为div2

4.1如果div1的position是static，说明div2位置是出现在哪里就显示在哪里。如下图：

div1的position是static，div2的position是absolute，这样div2就不受外层div的约束了。如果div2的position是relative，top:20px;但实际上，div2距离顶端是36px(大于20px)，不知道是不是浏览器的bug，ie和Firefox都如此。
代码如下

<div style="position:static;width:600px;height:400px;background:#FFE4C4;">
position:static;width:600px;height:400px;background:#FFE4C4
    <div style="position:relative;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E
    </div>
</div>

<div style="position:static;width:600px;height:400px;background:#FFE4C4;">
position:static;width:600px;height:400px;background:#FFE4C4
	<div style="position:relative;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E
	</div>
</div>

4.2如果div1的position是relative，这样div2的position不管是relative还是absolute，显示的效果基本是一样的，都是内层div针对外层div的位置。如下图：



不过这两者还有有区别的，如两张图片。如果div2的position是relative，top:20px;但实际上，div2距离顶端是36px(大于20px)，但如果div2的position是absolute，top:20px;div2距离顶端的高度就精确的是20px。
代码如下

<div style="position:relative;width:600px;height:400px;background:#FFE4C4;">
position:relative;width:600px;height:400px;background:#FFE4C4
    <div style="position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E
    </div>
</div>

<div style="position:relative;width:600px;height:400px;background:#FFE4C4;">
position:relative;width:600px;height:400px;background:#FFE4C4
	<div style="position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E
	</div>
</div>

4.3如果div1的position是absolute，这样div2的position也是absolute，那么div2的位置实际上是一个相对位置。如下图：


5.如果div的position是fixed，就不用说了，其位置永远相对浏览器位置来计算。

6.问题
从div的嵌套可以看出：position:relative，top:20px;无论是上级div的position是什么属性，实际上距离顶端总是大于20px。解决方案也很简单，不用top而用margin来代替。或者根据实际情况微调下。