绝对定位的初始包含块问题

yiminghe

浏览: 1453506 次
性别:
来自: 上海

最近访客更多访客>>

akingde

xmg25

xiaolan02

archerfrank

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

xhtml / css

Firefox 浏览器 IE JavaScript XHTML

对于 body 的子节点绝对定位问题，我们一般设置 top 属性，即假设浏览器窗口左上角是 0，0 坐标，根据这一原则来进行计算合适的top值，使绝对定位元素定位到合适位置。但是如果用到 bottom 属性，浏览器的表现就有差异了。

假设 bottom 属性为 0 ，这时就要明确到底哪个是绝对定位元素的初始包含块，根据 w3c 规范以及css权威指南，这个初始包含块由用户代理浏览器指定，那么各个浏览果然就出现了不一致的地方。

对于没有滚动条的情况，ie，firefox 都一样，都定位在页面底部。

当页面出现滚动条时，如果初始就显示绝对定位的div，那么 ie，firefox 都一样，都定位在页面底部。下一步将滚动条拉到底部，按钮隐藏掉绝对定位的div，再按钮显示，则

1.firefox ie8 ，7 下面绝对定位的div仍出现在原来位置（滚动条上面），故现在看不到了

2.ie6 下绝对定位的div 出现在当前的页面底部，可以看到

应该是 IE6 的 bug :(090622)

ie6 回到了混杂模式，虽然我申明页面为标准模式。

混杂模式下 body 下的绝对定位以 body 为定位块，所以定位到了页面底部。

标准模式下一般都定位以第一屏viewport视窗为定位块，所以定位到了第一屏窗口底部。（为什么第一屏？我也不知道，期待您的答案 ）

则可见运用 bottom 还是很不适应多平台的，那么有两个解决方法可以使得各个浏览器表现相同：

1.设置 html.body {margin:0;padding:0;}，所有的垂直定位都用 top 参考浏览器顶边来做，即不考虑包含块的具体下边界。

2.body 上面设置 position:relative 显式指定以 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" lang="en" xml:lang="en">
<head>
<title>absolute测试</title>
</head>
<body>
        <input type='button' id='b2' value='先点隐藏' />
	<div id='p1' style='border:1px solid green;position:absolute;right:0;bottom:0;width:100px;height:100px;'>
	</div>
	1<br/>
	1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>v
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>v
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
	<input type='button' id='b1' value='再点显示' />
</body>
<script type='text/javascript'>
document.getElementById('b2').onclick = function (evt) {
    document.getElementById('p1').style.display = 'none';
};
document.getElementById('b1').onclick = function (evt) {
    document.getElementById('p1').style.display = '';
};
</script>
</html>

参考阅读：

viewport w3c 定义

absolute position w3c 定义

Initial Containing Block w3c定义：UA决定

html 小于 viewport 的测试

各种情况的详细测试（包括rtl）

分享到：