繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 跨浏览器的实践:position:fixed 层的固定定位
- CSS样式表
- CSS优先级规则的细节
- CSS失效，原来是和网页第一段代码有关
- 你真的了解CSS吗？你是属于哪个层次？
- 让样式表CSS代码更加专业规范
- 建议网页设计师用CSS制作网站导航菜单
- 简单学习css组合与CSS嵌套的写法
- CSS学习之css代码的简写的十条规则
- 条件CSS的介绍
- CSS教程:网页中多个样式表顺序问题
- CSS教程：网页版面设计无效的10个原因
- 页面重构工程师应该具有的技能和素质
- 选择正确DOCTYPE解决CSS在网页失效问题
- Opera中国的WEB标准课程
- 简单介绍Web Developer插件制作网页
- CSS布局带来的巨大影响:CSS display属性值
- 用div css模拟表格对角线
- IE Firefox在css中的差别 (部分)
- 不用js可以实现信息提示效果
- CSS解决未知高度的垂直水平居中自适应问题
- CSS cursor 属性 -- 鼠标指针样式效果
CSS样式表 中的 跨浏览器的实践:position:fixed 层的固定定位
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 135 ::
收藏到网摘: 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 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
你删除第一行注释看看效果如何?
评论 (0) All
