position:fixed; 是fixed的用法,配合overflow实现将一个元素定位到网页的一个位置上面,具体请看下面的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<meta name="Author" content="Stu Nicholls"/>
<meta name="Keywords" content="Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS Frames, CSS menu, CSS menus"/>
<meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS"/>
<title> CSS position:fixed; for IE6</title>
<style type="text/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;}
#page {margin:310px 0 50px 250px; display:block; width:500px; border:1px solid #000; background:#fff; padding:10px;}

#page .right {font-size:30px; float:right;}
#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;}
#menu a:visited, #menu a {display:block; width:120px; height:20px; margin:0 auto; border-top:1px solid #fff; border-bottom:1px solid #000; text-align:center; text-decoration:none; line-height:20px; color:#CC0000;}
#menu a:hover {background:#aaa; color:#fff;}
.clear {clear:both;}
</style>
<!--[if IE 6]>
 <style type="text/css">
 /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
 /*]]>*/
 </style>
<![endif]-->
</head>

<body>
<div id="page">
<div class="right">position:fixed;</div>
<div class="clear"/>
<a name="bites"/>

<div class="right">Another one bites the dust~</div>
<div class="clear"/>
<p>Well, they said it couldn't be done in IE6 because of a browser bug.</p>
<p>But they didn't know that another bug works in a way that ALLOWS this to be done!</p>
<p>This page has a fixed menu in the top left hand corner of the screen. This menu will remain on screen at all times in NN7, Opera, Mozilla, Firefox AND IE6!!</p>
<p>Just scroll this page and see the menu pass over the top without so much as a flicker (not like those javascript things that jerk and jump down the screen trying to keep up with the scroll). In fact IE6 handles the scrolling better that Mozilla/Firefox.</p>
<p>This is all done using standard CSS with a little help from another IE6 BUG that makes it believe that 'ABSOLUTE' is 'FIXED'.</p>
<p>Just take a peek at the source code to see that all it takes is a setting of height:100% for the body (with overflow-y:auto) and it works.<br/>
Anything that is position:absolute; or position:relative; will now be FIXED in IE6.</p>
<p>The only problem with this is that you cannot use absolute or relative positions on the moving page but float is allowed.</p>
<div class="right">and there you have it~</div>
<div class="clear"/>
<p>The rest of this page is just put in to fill up the space to extend the div out of the screen area</p>
<p>Taking this to extremes you have <a href="http://www.cssplay.co.uk/layouts/frame.html">The Holy Grill</a></p>

<p>This page is <a href="http://validator.w3.org/check/referer">Valid XHTML1.1</a>.</p>

<p>?2004 Stuart A Nicholls ~all rights reserved (but help yourself to the code anyway ;)</p>
<p>Back to the <a href="http://www.cssplay.co.uk/">Home Page</a>.</p>
<p>Let's stuff a few images at the end to see if there is a problem in IE.</p>
<p>Looks ok to me?</p>
<a href="#bites">Goto 'Another one bites the dust'</a><br/>

</div>
<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>
<a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=position%20fixed" title="Your comments">Comments</a>
</div>
</body>
</html>

实现兼容IE6的方式:

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

CSS的精华部分在:

body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; background:#ccc;}

#menu {display:block; top:10px; left:10px; width:130px; position:fixed;

* html #menu {position:absolute;}