当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 跨浏览器的实践:position:fixed 层的固定定位

CSS样式表
CSS Expression 优化
CSS 网页布局时常犯的10个小错误整理
CSS代码 解决网页挂马问题
CSS去除表格的默认间距并且制作1px的细线表
CSS的私有属性小结(针对FireFox浏览器)
CSS网页设计中的解决方案
Firefox和IE通用的三则网站重构实用技巧
CSS解决文字环绕图片问题
CSS教程:可扩展圆角标签的实现方法
CSS教程:水平对齐(text-align)
写给刚刚接触web标准的新人们
CSS教程:盒模型(BOX Model)
CSS教程:CSS中的定位(position)
Web标准真的是标准吗?
从四个方面谈谈Web标准的价值所在
CSS教程:网页表单设计技巧
CSS Hack整理
CSS教程:网页文本渐变
CSS教程:用dl dt dd来制作列表
CSS入门教程:计算CSS盒模型宽和高

CSS样式表 中的 跨浏览器的实践:position:fixed 层的固定定位


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 117 ::
收藏到网摘: n/a

一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之

看示例吧:
<style type="text/css">
body{
margin:0;
padding:30px 0 0 0;
}
div#menu{
position:absolute; top:0;
left:0;
width:100%;
height:30px;
background-color:#ddd;
}
@media screen{
body>div#menu{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
HTML示例:

点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

你删除第一行注释看看效果如何?