对于 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)
分享到:
相关推荐
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute...包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好
一、定位属性的基本情况 使用position属性对元素进行定位: ...absolute:元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素定位后生成一个块级框,而无论原来
包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 fixed 元素框的表现...
绝对定位示例 (v1.0) 此示例显示了四个具有不同颜色边框的嵌套div元素。... 这对所有四个元素重复,并显示任何元素如何标记position: absolute查找非static父元素,如果未找到则绑定到初始包含块。 — 罗伊·瓦内加斯
绝对定位参照的是离它最近的父元素或祖先元素,如果没有父元素或祖先元素,那么参照的是初始包含块(不同的浏览器可能不一样,因为W3C没有规定浏览器具体如何去实现)。但实际上,大部分浏览器将可视区当作绝对定位...
接上文JavaScript简单实现弹出... 1、要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute); /*登录浮层组件*/ .popup{ display:none; /*初始隐藏*/ width: 380px; height: auto;
要求完成的主要任务: (包括课程设计工作量及其技术要求,以及说明书撰写等具体要求) 1.要求首先采用动态分区方案,用最先适用算法对作业实施内存分配,然后把作业地址空间的某一逻辑地址转换成相应的物理地址。...
11.3.6 绝对定位 395 11.3.7 BoxLayout布局管理器 396 学生提问:图11.15和图11.16显示的所有按钮都紧挨在一起,如果希望像FlowLayout、GridLayout等布局管理器指定组件的间距该怎么办? 397 11.4 AWT 常用组件 ...
看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手...1.初始化生成10个div,全都采用绝对定位,每个div中放一个雪花图片,设置好宽高,并保存在数组中,便于后面下雪的函数直接操作。 2.初始化每
首先需要一个容器,程序会自动设置容器overflow为hidden,如果不是相对或绝对定位会同时设置position为relative, 滑动对象会设置为绝对定位: var p = CurrentStyle(this._container).position; p == "relative" |...
Viewport 移动设备上的Viewport就是设备的屏幕上能用来显示网页的一块区域,即浏览器上用来显示网页的那部分区域。Viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域要大,也可能比浏览器的可视区域要...
2、修正“目录_复制”在线程未初始化,导致对象不能创建的问题,感谢易友【@pp25729391】反馈。 3、修正“类_环境存取->读环境变量”不能读取当前进程环境变量的BUG,感谢易友【@詠不言敗】反馈。 4、修正“文本_...
熟悉裸板程序的结构,给你一个Bootloader就能分析它的初始化部分、内存使用情况、链接地址、重定位、程序的相对跳转/绝对跳转等;掌握Bootloader启动内核的原理,能完全自己写出一个Bootloader。
参数:字符串的URL地址,用以解决前后台不在同一路径的资源定位问题 备注:1.1.0新添加 urlType:本地URL地址强制转换方式选择 参数:abs(绝对路径),root(根路径),rel(相对路径) 备注:1.0.0 beta2新添加,v1.1.0版中...
关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥...
关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥...
14.4 继承中关于属性的一些问题.169 14.5 小 结 .172 第四部分 深入了解 C#.174 第十五章 接 口 .174 15.1 组件编程技术 .174 15.2 接 口 定 义 .177 15.3 接口的成员 .178 15.4 接口的实现 .182 ...
关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥...
关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥...
关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥...