CSS position:fixed for IE_position: fixed 在浏览器内核中怎么写-优快云博客

本文介绍如何利用CSS的position:fixed;属性结合HTML结构实现元素在页面上的固定定位，并解决了在不同浏览器尤其是IE下的兼容性问题。

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

position:fixed; 是fixed的用法,配合overflow实现将一个元素固定定位到网页的一个位置上面
Main CSS

html {background:#ccc;}
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto; background:#ccc;}
body {font-family: georgia, serif; font-size:12px;}

#menu {display:block; top:10px; left:10px; width:130px; position:fixed; border:1px solid #990000; padding:10px; text-align:center; font-weight:bold; color:#990000; background:#fff;}

* html #menu {position:absolute;}/*only for ie*/

CSS for IE

<!--[if IE 6]>
 <style type="text/css">
 /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
 /*]]>*/
 </style>
<![endif]-->

Xhtml:

<div id="menu">
<a href="#" title="Dummy menu item">Mozilla</a>
<a href="#" title="Dummy menu item">Opera</a>
<a href="#" title="Dummy menu item">Netscape</a>
<a href="#bites" title="Dummy menu item">Firefox</a>
<a href="#" title="Dummy menu item">IE6</a>
<a href="#" title="Dummy menu item">Windows</a>
<a href="#" title="Dummy menu item">Style</a>
<a href="#" title="Dummy menu item">CSS</a>
</div>

因为非IE的主流浏览器都支持position:fixed;所以只需要给IE设置一下fixed效果。

第一步让IE下#menu具有绝对定位 * html #menu {position:absolute;}/*only for ie*/结果看到有两个纵轴滚动条，外围是html的，内侧是body的。
第二步去掉外侧滚动条，因为外侧没有滚动效果 html {overflow-x:auto; overflow-y:hidden;}
我的首页已经加入了这个CSS样式,并且通过的W3C验证,请去首页查看