DIV的Position属性和DIV嵌套DIV

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

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

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

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

4.1如果div1的position是static，说明div2位置是[b]出现在哪里就显示在哪里[/b]。如下图：
[img]http://www.kutoku.info/images/java/100810/div1.png[/img]
div1的position是static，div2的position是absolute，这样div2就不受外层div的约束了。如果div2的position是relative，top:20px;但实际上，div2距离顶端是36px(大于20px)，不知道是不是浏览器的bug，ie和Firefox都如此。
代码如下
[code]
<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>
[/code]

4.2如果div1的position是relative，这样div2的position不管是relative还是absolute，显示的效果基本是一样的，都是[b]内层div针对外层div的位置[/b]。如下图：
[img]http://www.kutoku.info/images/java/100810/div2.png[/img]

[img]http://www.kutoku.info/images/java/100810/div3.png[/img]
不过这两者还有有区别的，如两张图片。如果div2的position是relative，top:20px;但实际上，div2距离顶端是36px(大于20px)，但如果div2的position是absolute，top:20px;div2距离顶端的高度就精确的是20px。
代码如下
[code]
<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>
[/code]

4.3如果div1的position是absolute，这样div2的position也是absolute，那么div2的位置实际上是一个相对位置。如下图：
[img]http://www.kutoku.info/images/java/100810/div4.png[/img]

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

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

文章url：[url]http://javapub.iteye.com/blog/733471[/url]