CSS div 层固定在网页顶部代码，固定在网页顶部的层，可以是活动的，即可以使用开关，很多微博上都有这个应用，是一个不错的用户体验。
实际上细心的朋友会发现，这个顶部的工具条实则是一个平铺的背景色，CSS起到固定背景的作用，也算是一种独特的实现方法。
本实例 兼容 Mozilla Opera Netscape Firefox IE6等主流浏览器
效果图如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position-固定用法。</title>
<style type="text/css">
body {margin:0; padding:0 10px 0 10px; border:0;height:100%; overflow:auto;}
.content{padding-top:70px;width:300px;margin:0 auto;line-height:30px;font-size:12px;}
#menu {right:0; top:0; width:100%;position:fixed;height:70px;line-height:70px;text-align:center; font-weight:bold; background:#000;color:#fff;}
* html #menu {position:absolute;right:16px;left:0;width:100%;}/*only for ie*/
</style>
</head>
<body>
<div id="menu">Mozilla Opera Netscape Firefox IE6 CSS</div>
<div class="content">
<p>1看右上角的内容，不论浏览器怎么滚动，它始终在那个地方！</p>
<p><a href="http://www.ok22.org/art_detail.aspx?id=485" title="如何在网页中嵌入自己想要的字体(实例下载)">如何在网页中嵌入自己想要的字体(实例下载)</a>2012-12-1 10:17:02</p>
<a href="http://www.ok22.org/s.aspx?tag=%E5%AD%97%E4%BD%93">字体</a>\<a href="http://www.ok22.org/s.aspx?tag=%E7%BD%91%E9%A1%B5">网页</a>\<a href="http://www.ok22.org/s.aspx?tag=font">font</a><br />
本文主要介绍如何在网页上使用自己想要而网页中没有的字体。文章底部有下载地址跟预览地址！字体使用是网页设计中不可或缺的一部分。网页是文字的载体，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：一、不可能大范围的使用该字体；二、图片内容相对使用文字不易修改；三、不利于网站SEO。网络上有一些使用sIFR技术、或javascript/fl...<a title="阅读全文" href="http://www.ok22.org/art_detail.aspx?id=485">未完，继续阅读→</a>
<p>阅读(37)条评论(0)条</p>
<p><a href="http://www.ok22.org/art_detail.aspx?id=484" title="IE6bug绝对定位及其解决办法">IE6bug绝对定位及其解决办法</a>2012-11-30 16:52:41</p>
<a href="http://www.ok22.org/s.aspx?tag=ie">ie</a><br />
<a href="http://www.ok22.org/s.aspx?tag=bug">bug</a><br />
<a href="http://www.ok22.org/s.aspx?tag=%E5%AE%9A%E4%BD%8D">定位</a><br />
IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题：字体。文章底部有下载地址跟预览地址！字体使用是网页设计中不可或缺的一部分。网页是文字的载体，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做...<a title="阅读全文" href="http://www.ok22.org/art_detail.aspx?id=484">未完，继续阅读→</a>
<p>看右上角的内容，不论浏览器怎么滚动，到底了！</p>
</div>
</body>
</html>
好了，还有什么问题可以留言。
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)