position:fixed

本文详细介绍了如何通过特定的CSS代码让position:fixed在不支持该属性的IE6浏览器中仍然可以正常使用,包括针对头部、底部、左侧和右侧的固定定位。同时,还提供了解决IE6中振动bug的方法。
http://www.qianduan.net/fix-ie6-dont-support-position-fixed-bug.html


/*让position:fixed在IE6下可用! */

.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
### `position: fixed`和`position: absolute`的区别 #### 定位参考点 - `position: fixed`:元素会相对于浏览器窗口进行定位。无论页面如何滚动,元素都会固定在浏览器窗口的某个位置。例如,网页底部的固定导航栏,无论用户滚动到页面的哪个位置,导航栏始终显示在底部。 - `position: absolute`:元素会相对于最近的已定位祖先元素(即`position`值不为`static`的祖先元素)进行定位。如果没有已定位的祖先元素,则相对于`<html>`元素定位。在让`td`里的`div`二维码内容悬浮外面的场景中,若`td`设置了`position: relative`,则`div`会相对于该`td`进行定位。 #### 对文档流的影响 - `position: fixed`:元素会脱离正常的文档流,不再占据页面中的空间。其他元素会忽略该元素的存在,就好像它不存在于页面中一样。 - `position: absolute`:同样会使元素脱离正常的文档流,周围的元素会重新布局,就好像该元素不存在一样。 #### 滚动行为 - `position: fixed`:元素不会随着页面的滚动而移动,始终固定在浏览器窗口的指定位置。 - `position: absolute`:元素会随着包含它的已定位祖先元素的滚动而移动。如果祖先元素没有滚动,而页面滚动,元素也会跟着页面滚动。 ### 应用场景 #### `position: fixed` - 固定导航栏:如网页顶部或底部的导航栏,始终显示在浏览器窗口的特定位置,方便用户随时访问导航功能。 - 侧边栏广告:在页面滚动时,广告始终固定在侧边,吸引用户的注意力。 #### `position: absolute` - 下拉菜单:当鼠标悬停在某个菜单选项上时,下拉菜单以绝对定位的方式显示在菜单选项下方,不影响其他元素的布局。 - 图片上的文字说明:在图片的特定位置添加文字说明,通过绝对定位将文字放置在图片上的合适位置。 ### 在`td`中`div`悬浮不受同`tr`其他`td`长度影响的应用 在该场景中,使用`position: absolute`更为合适。通过将`td`设置为`position: relative`,将`div`设置为`position: absolute`,可以让`div`相对于`td`进行定位,从而悬浮在`td`外面,不受同`tr`其他`td`长度的影响。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QR Code in TD</title> <style> table { border-collapse: collapse; } td { border: 1px solid #ccc; padding: 10px; position: relative; } .qr-code { width: 100px; height: 100px; background-color: #eee; position: absolute; top: 0; left: 100%; z-index: 1; } </style> </head> <body> <table> <tr> <td> <div class="qr-code"> <!-- 这里可以放置二维码图片或生成二维码的代码 --> QR Code </div> 这是单元格内容 </td> <td>其他单元格内容</td> </tr> </table> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值