css布局问题 relative

[gaocctv]

最近在看一个网页，全部都是用绝对定位布局的，很不合理，只能在1024*768的分辨率下显示正常，在别的分辨率下布局乱七八糟的。然而如果重构又太麻烦，从网上查了一种办法：将所有div层的外边加一个层，使之现对定位并设置margin:0 auto; 即：
<div style="margin:0 auto;position:relative;">
网页的所有层
</div>

一直不明白这是一种什么原理，为什么里面的布局全是绝对定位，在外边加一层相对定位的就好了呢，不明白，哪位仁兄给解释一下

[arjsyy]

这样设置成相对定位以后就是每一个元素之间就是相对的不再是以前是绝对的，有点说不清楚了布局的时候块与块之间最好用的就是相对定位不要用绝对定位，在块里面可以用绝对定位，这样说吧，在绝对定位是死的，而相对定位比较灵活一些

[gaocctv]

绝对定位不是相对于显示器的边框而言的吗，块里面用绝对定位的，外面是现对定位，那到底是对谁而言呢
哪个才是参照物

[birdstudio]

在没有这个外层div的时候，这些绝对定位元素以视口（浏览器内容区）为基准；在有这个div的时候，由于它自身有定位属性(position:relative)，这些绝对定位元素以它作为定位基准。它同时还是居中的(margin:0 auto)，所以就很好地控制了整个网页的布局。当然我觉得这个div是不是还应该有一个确定的宽度？

如果你不知道我在说什么，建议你补一下CSS定位。

[birdstudio]

修正一下，

在没有这个外层div的时候，这些绝对定位元素以html元素为基准（怪癖模式下可能以body元素为基准）。

[mrshelly]

绝对定位是针对 最近的带 relative 的父元素 为参照的.

[njzdl]

[Quote=引用 2 楼 gaocctv 的回复:]
绝对定位不是相对于显示器的边框而言的吗，块里面用绝对定位的，外面是现对定位，那到底是对谁而言呢
哪个才是参照物
[/Quote]

绝对定位是相对于父块而言的，而不是显示器的边框

[njzdl]

[Quote=引用楼主 gaocctv 的帖子:]
最近在看一个网页，全部都是用绝对定位布局的，很不合理，只能在1024*768的分辨率下显示正常，在别的分辨率下布局乱七八糟的。然而如果重构又太麻烦，从网上查了一种办法：将所有div层的外边加一个层，使之现对定位并设置margin:0 auto; 即：
<div style="margin:0 auto;position:relative;">
网页的所有层
</div>

一直不明白这是一种什么原理，为什么里面的布局全是绝对定位，在外边加一层相对定位的就好了呢，不明…
[/Quote]

采用绝对布局，如果设置一定的宽度，然后居中显示，我觉得也没有什么不妥。

[zhimxt]

在网页的最外层使用绝对定位和固定宽度，里面的层用相对定位，宽度可以用百分比为单位，这样的话网页布局会比较灵活，代码也比较简洁。

[ddcatlee]

定位（position）允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述，而其位置由此元素的包含块来决定的。

http://www.ddcat.net/blog/?p=121