层的固定定位.跨浏览器的实践:position:fixed

街头小贩

于 2008-10-08 15:00:00 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签：浏览器 stylesheet div menu css

本文链接：https://blog.youkuaiyun.com/xiaofanku/article/details/3033794

本文介绍了一种使用CSS实现跨浏览器的固定定位方法。通过将菜单栏设置为绝对定位，并利用@media screen选择器将其转换为固定定位，实现了兼容多种浏览器的布局效果。此方案巧妙地解决了在不同浏览器中固定定位的一致性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般要固定某个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示例:

 
 <!-- quirksmode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Demo</title>
<link href="fixed.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu"> 
Mozilla
Opera
Netscape
Firefox
IE6
Windows
Style
CSS
</div>
<div id="content">
只要内容大于一屏的高度就行
</div>
</body></html>
 