给body设置position:relative;的好处

以下情况只出现在IE6，7中。

先运行此代码，之后调整窗口大小。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>给body设置position:relative;</title> <style type="text/css"> body{width:500px;margin:0 auto;border:solid 1px blue;height:500px;} #container{position:relative;} #container span{position:absolute;left:10px;top:10px;border:solid 1px green;} </style> </head> <body> <div id="container"> <span>当在IE6，7中改变窗口大小时，我会出现问题。</span> </div> </body> </html>
提示：您可以先修改部分代码再运行

如果给#container显试设置width:100%;那么该情况只出现在IE7中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>给body设置position:relative;</title> <style type="text/css"> body{width:500px;margin:0 auto;border:solid 1px blue;height:500px;} #container{position:relative;width:100%;} #container span{position:absolute;left:10px;top:10px;border:solid 1px green;} </style> </head> <body> <div id="container"> <span>给#container显试设置width:100%;则该问题只会在IE7中出现。</span> </div> </body> </html>
提示：您可以先修改部分代码再运行

给body设置position:relative; ，就好了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>给body设置position:relative;</title> <style type="text/css"> body{width:500px;margin:0 auto;border:solid 1px blue;height:500px;position:relative;} #container{position:relative;} #container span{position:absolute;left:10px;top:10px;border:solid 1px green;} </style> </head> <body> <div id="container"> <span>给body设置position:relative;感觉利大于弊（好像没有弊）。</span> </div> </body> </html>
提示：您可以先修改部分代码再运行

因此，最好给body设置position:relative;。

[ 本帖最后由 yoom 于 2009-3-26 11:06 编辑 ]

作者: yoom 发布时间: 2009-03-26

我修改这个帖子回复

以前一直认为position设置绝对属性的时候，它找的是body

后来发现，只有设置position相对属性时，绝对的那个容器才不会有位置变化

[ 本帖最后由 goos 于 2009-3-26 11:16 编辑 ]

作者: goos 发布时间: 2009-03-26

我不是讨论满屏的问题。

而是说IE6，7在改变窗口大小时，对某种情况下的position:absolute;的坐标计算错误。

作者: yoom 发布时间: 2009-03-26

引用:

原帖由 yoom 于 2009-3-26 11:12 发表
我不是讨论满屏的问题。

而是说IE6，7在改变窗口大小时，对某种情况下的position:absolute;的坐标计算错误。

看来题目没搞清楚，你最好的例子设置两定位的广告条。

你说的这个问题，昨天刚碰到，支持下body添加postion的相对属性

作者: goos 发布时间: 2009-03-26

Yoom：

又有问题了
查看如下页面,FF下有问题，ie下没测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("div").each(function(){ $(this).append($(this).attr("style")); }) }) </script> <style type="text/css"> html{ border:0;} body{font-size:11px; font-family:Tahoma; color:#f00; text-align:center; position:relative; } div{ text-align:left; background:#fff; border:solid 1px #ccc;} </style> </head> <body> <div style="position:absolute; width:200px; height:100px; bottom:20px; right:20px;"></div> <div style="width:500px; height:300px; position:relative; margin:0 auto;"> <div style="position: inherit; width:200px; height:100px; top:10px; left:10px;"></div> <div style="position:absolute; width:200px; height:100px; bottom:20px; right:20px;"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

然后再看这个的，html'，body需要添加height:100%;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("div").each(function(){ $(this).append($(this).attr("style")); }) }) </script> <style type="text/css"> html{ border:0; height:100%; overflow:hidden;} body{ height:100%; font-size:11px; font-family:Tahoma; color:#f00; text-align:center; position:relative; overflow:auto;} div{ text-align:left; background:#fff; border:solid 1px #ccc;} </style> </head> <body> <div style="position:absolute; width:200px; height:100px; bottom:20px; right:20px;"></div> <div style="width:500px; height:300px; position:relative; margin:0 auto;"> <div style="position: inherit; width:200px; height:100px; top:10px; left:10px;"></div> <div style="position:absolute; width:200px; height:100px; bottom:20px; right:20px;"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: goos 发布时间: 2009-03-26

不过我们一般不会对body设置width:500px;margin:0 auto;吧

作者: ONEBOYS 发布时间: 2009-03-26

页面居中，我觉得还是设在body下一层比较好

作者: ONEBOYS 发布时间: 2009-03-26

position的绝对定位本来就是对他的父级元素的，如果父级元素不是relative的话，绝对定位就是相对body来说的。

作者: FishStanding 发布时间: 2009-03-26

引用:

原帖由 FishStanding 于 2009-3-26 12:38 发表
position的绝对定位本来就是对他的父级元素的，如果父级元素不是relative的话，绝对定位就是相对body来说的。

不是相对body，而是相对于html，除非body设置了position:relative;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{border:solid 1px blue;height:100px;width:50%;margin:0 auto;} span{position:absolute;left:0;top:0;border:solid 1px red;} </style> <title>absolute</title> </head> <body> <span>我相对与html定位，除非body显试设置position:relative;。</span> </body> </html>
提示：您可以先修改部分代码再运行

作者: yoom 发布时间: 2009-03-26

理解绝对定位和相对定位http://webteam.tencent.com/?p=328

[ 本帖最后由 radom 于 2009-3-26 13:35 编辑 ]

作者: radom 发布时间: 2009-03-26

我刚好遇到这个问题，不过在我的项目中，同时设定了body的宽度和position对我来说是致命的。我想问，在body设置了宽度的情况下，如何让获取页面的宽度（除去滚动条）？

作者: NTTDoCoMo 发布时间: 2009-06-02

我也遇到这个问题，IE6,7对相对定位的解释跟其他浏览器不同！一不小心就出问题了！

作者: lijie250 发布时间: 2009-07-24

不错..学习了..

作者: musictea 发布时间: 2009-07-24

怎么老帖子翻上来了？

对于这个问题，我想说的是，不要给 body 设置宽度和外边距，也就是说，不要用 body 来布局。

作者: birdstudio 发布时间: 2009-07-24

一直都没理解这东西的意思，看来不错

作者: thanming 发布时间: 2009-07-25

同意这种说法。用BODY来布局是不合理的

作者: cuir 发布时间: 2009-07-25

很早以前老衲一直用 body 来居中，不过很久没用了

作者: HeTingYi 发布时间: 2009-07-25

引用:

原帖由 birdstudio 于 2009-7-24 20:48 发表
怎么老帖子翻上来了？

对于这个问题，我想说的是，不要给 body 设置宽度和外边距，也就是说，不要用 body 来布局。

对于结构的理解：html是内容最外层 body是第二层
在具体应用中在很多情况下body可以作为最外层来代替wraper层
例如：
<html>
   <body>
      <div id="wraper">
            页面内容
      </div>
   </body>
</html>

<html>
   <body  id="wraper">
            页面内容
   </body>
</html>
如果页面结构允许的情况下是可以用body来控制页面表现的,但如果嵌套一个容器来做页面控制那么我们对<div id="wraper">应该怎么理解呢？在某些情况下我们是不是可以认为<div id="wraper">是没有意义的.
如果<div id="wraper">是为了以后方便扩展或者理解为多一层有多一层的表现那么是可以的.

这是我个人观点,希望多多交流！

作者: marsvip 发布时间: 2009-07-26

这只是一个建议——不要用 body 元素来布局。

作者: birdstudio 发布时间: 2009-07-26

同意，不建议用BODY来布局，实在有必要可以加个外套层，没有必要为了省这么一个标签

作者: moondy 发布时间: 2009-07-28

建议的理由是什么呢？请指点下！

作者: marsvip 发布时间: 2009-07-28

引用:

原帖由 marsvip 于 2009-7-28 10:06 发表
建议的理由是什么呢？请指点下！

不得不给 body 加一个 position:relative; 来 hack 就是最好的理由。

作者: birdstudio 发布时间: 2009-07-28

引用:

原帖由 birdstudio 于 2009-7-28 18:17 发表

不得不给 body 加一个 position:relative; 来 hack 就是最好的理由。

body有了 position:relative;也不影响,可能大家的理解不同吧！谢谢！

作者: marsvip 发布时间: 2009-07-29

为什么要用BODY布局呢？没那个习惯

作者: lanseyidu 发布时间: 2009-07-29

我也没有给body设置宽度位置的习惯

作者: singlesoho 发布时间: 2009-07-29

如果页面整体居中，直接给body加宽度和外边距不是一步到位吗？

作者: zzxstr 发布时间: 2009-08-05

是可以一步到位的。

但是具体情况具体分析。
比如body中有个子元素设置了position:absolute;非IE6最大化时，刷新，是正常的。但最大化后，问题就出来了。

用IE6测试楼主的代码，就可以看出问题了。
这篇文章并不是为了解决页面整体居中，而是为了解决IE6 style为position:absolute;的元素闹的小情绪。

作者: yoom 发布时间: 2009-08-18

- -yoom称自己为楼主了，

虽然这问题修复了IE6和7，但同时却给标准浏览器造成了麻烦，

因此：
1.要么给IE6,7做hack ，body{*position:relative}，
2.要么给设置后给对标准浏览器再加代码html,body{height:100%}（但我感觉这东西会在实际中遇到麻烦，目前只碰到body的背景图片居中，因为限在了100%），
3.要么不用body来作为定位的参考位置。

完毕，翻老贴了，主要是这贴在收藏夹里待着。

[ 本帖最后由 lisfan 于 2010-1-4 15:46 编辑 ]

作者: lisfan 发布时间: 2010-01-04

没必要专门写条件注释的。
因为body{position:relative;}对新版的标准浏览器并没有“伤害”，且设置后恰好有可以解决IE6 7的问题，我实在没有理由不给body设置position:relative;。

另外，说楼主是当时故意的，想低调些

。

补充：事实上，我已经成功用这个属性解决了至少4个Bier的问题

，大多是关于窗口变化导致导航的错位问题！
还忘了说明件事情，我没有在这个帖子里面传达一种思想：用body来布局，当时给body加边框，并不是布局的意思，而是为了证明在IE6、7中的两个bug。

如果侵犯了版规，请版主沉了吧。

[ 本帖最后由 yoom 于 2010-1-4 16:01 编辑 ]

作者: yoom 发布时间: 2010-01-04

。。伤害有的吧？5楼goos版主的那段，不能算伤害吗，还是说应该算标准浏览器的正确解析，不是很懂？
绝对定位虽然说定位在底部的情况不多，但对于不超过浏览器100%内容的时候还是很有用的，所以body{position:relative}感觉也不算是个彻底的解决方法

作者: lisfan 发布时间: 2010-01-04

position的绝对定位的属性一直用不好郁闷

作者: liumangkun 发布时间: 2010-01-04

你太有喜感了，这也算伤害？
我给body设置position:relative;是为了让解决窗口缩放后，对定位参考点的计算错误。
“绝对定位虽然说定位在底部的情况不多”,这句话不知道你想表达什么。

设置position:relatibe;并不是万能的，我也没有说它是万能属性，这里只是解决IE6、7在窗口缩放后对定位参考点坐标的计算问题，扯远了。

作者: yoom 发布时间: 2010-01-04

能够说说，或者贴代码吗？定位很好用的！

作者: yoom 发布时间: 2010-01-04

好吧，到此结束，单单解决这问题的话，已经OK了，我只是发散了下

作者: lisfan 发布时间: 2010-01-04

楼主忘了一个大大的错误，
如果在body加相对定位。在IE6下面
文字就不可以一个一个的选了。

用户体验极差。如我选一个标题复制都很难哦。

作者: hemin007 发布时间: 2010-01-04

？？
木有发现楼上所述的bug吖。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>无标题文档</title> <style type="text/css"> body { position:relative;} </style> </head> <body> 无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档 </body> </html>
提示：您可以先修改部分代码再运行

作者: 14px 发布时间: 2010-01-04

引用:

原帖由 hemin007 于 2010-1-4 16:38 发表
楼主忘了一个大大的错误，
如果在body加相对定位。在IE6下面
文字就不可以一个一个的选了。

用户体验极差。如我选一个标题复制都很难哦。

我猜你和我一样用了阉割版的绿色IE6

作者: moierby 发布时间: 2010-01-05

看楼主写的样式，body{width:500px;margin:0 auto;border:solid 1px blue;height:500px;}
一般情况下没有人会这么做，设置body的宽度来让网页内容居中，这种做法属于一种偏激的一种做法。
你这么做虽然也可以达到让网页内容居中的目的，但是网页的需求是不断变化的，如果我想在网页左右两侧加一个广告条，哪么你这个方法缺陷就显示出来了。

作者: longjianghu 发布时间: 2010-01-07

看了下来,我怎么有点感觉这个是因为前提造成后面的bug的出现..

前提是: 为了营造一个水平居中的盒子,但是又不给盒子设定宽度,于是就把属性给了body, 连锁反应就来了,接着 span 就在IE下出现了bug.

如果把属性从body上移掉,那是就不会有这个问题.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>给body设置position:relative;</title> <style type="text/css"> body{} .box {width:500px;border:2px solid #000;margin:0 auto;} #container{position:relative;} #container span{position:absolute;left:10px;top:10px;border:solid 1px green;} </style> </head> <body> <div class="box"> <div id="container"> <span>当在IE6，7中改变窗口大小时，<strong>因为我把属性从body移走了</strong>所以问题消失了 - - 。</span> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: angell8684 发布时间: 2010-01-07

body设置了宽度，就不能加广告条了么？
广告条一定是用JS做的吧，判断浏览器窗口大小，并设置合适的left和right应该不是难事。

作者: yoom 发布时间: 2010-01-07

前一段看W3C改版页面发现他们给BODY设置了最大最小宽度，不过没居中，一般情况下很少用BODY布局的吧。

作者: mycggo 发布时间: 2010-01-07

引用:

原帖由 yoom 于 2010-1-7 11:13 发表
body设置了宽度，就不能加广告条了么？
广告条一定是用JS做的吧，判断浏览器窗口大小，并设置合适的left和right应该不是难事。

如果用css做会出现BUG，只是举个例子，暂时没有想到好的示例来说明。

作者: longjianghu 发布时间: 2010-01-11

position的绝对定位的属性一直用不好郁闷

作者: liumangkun 发布时间: 2010-01-04

你太有喜感了，这也算伤害？
我给body设置position:relative;是为了让解决窗口缩放后，对定位参考点的计算错误。
“绝对定位虽然说定位在底部的情况不多”,这句话不知道你想表达什么。

设置position:relatibe;并不是万能的，我也没有说它是万能属性，这里只是解决IE6、7在窗口缩放后对定位参考点坐标的计算问题，扯远了。

作者: yoom 发布时间: 2010-01-04

能够说说，或者贴代码吗？定位很好用的！

作者: yoom 发布时间: 2010-01-04

好吧，到此结束，单单解决这问题的话，已经OK了，我只是发散了下

作者: lisfan 发布时间: 2010-01-04

楼主忘了一个大大的错误，
如果在body加相对定位。在IE6下面
文字就不可以一个一个的选了。

用户体验极差。如我选一个标题复制都很难哦。

作者: hemin007 发布时间: 2010-01-04

？？
木有发现楼上所述的bug吖。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>无标题文档</title> <style type="text/css"> body { position:relative;} </style> </head> <body> 无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档 </body> </html>
提示：您可以先修改部分代码再运行

作者: 14px 发布时间: 2010-01-04

引用:

原帖由 hemin007 于 2010-1-4 16:38 发表
楼主忘了一个大大的错误，
如果在body加相对定位。在IE6下面
文字就不可以一个一个的选了。

用户体验极差。如我选一个标题复制都很难哦。

我猜你和我一样用了阉割版的绿色IE6

作者: moierby 发布时间: 2010-01-05

看楼主写的样式，body{width:500px;margin:0 auto;border:solid 1px blue;height:500px;}
一般情况下没有人会这么做，设置body的宽度来让网页内容居中，这种做法属于一种偏激的一种做法。
你这么做虽然也可以达到让网页内容居中的目的，但是网页的需求是不断变化的，如果我想在网页左右两侧加一个广告条，哪么你这个方法缺陷就显示出来了。

作者: longjianghu 发布时间: 2010-01-07

看了下来,我怎么有点感觉这个是因为前提造成后面的bug的出现..

前提是: 为了营造一个水平居中的盒子,但是又不给盒子设定宽度,于是就把属性给了body, 连锁反应就来了,接着 span 就在IE下出现了bug.

如果把属性从body上移掉,那是就不会有这个问题.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>给body设置position:relative;</title> <style type="text/css"> body{} .box {width:500px;border:2px solid #000;margin:0 auto;} #container{position:relative;} #container span{position:absolute;left:10px;top:10px;border:solid 1px green;} </style> </head> <body> <div class="box"> <div id="container"> <span>当在IE6，7中改变窗口大小时，<strong>因为我把属性从body移走了</strong>所以问题消失了 - - 。</span> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: angell8684 发布时间: 2010-01-07

body设置了宽度，就不能加广告条了么？
广告条一定是用JS做的吧，判断浏览器窗口大小，并设置合适的left和right应该不是难事。

作者: yoom 发布时间: 2010-01-07

前一段看W3C改版页面发现他们给BODY设置了最大最小宽度，不过没居中，一般情况下很少用BODY布局的吧。

作者: mycggo 发布时间: 2010-01-07