我相信这个绝对定位(position: fixed)CSS属性很多人都不陌生,也多应用过,同样我曾也尝试过绝对定位,试验过后发现,它是华丽而不省油,相当消耗计算机内存,特别在我这老机器上运行显然有些吃力,曾看过某些专家们使用华丽而不消耗内存方法,但有些复杂。
但今天我要想大家展示的比较非常规的应用,我相信大家演示后一定会惊叹,一定会记住这个绝对定位应用。
使用了两张透明度的GIF图片作为交叉比较,一个定位一个非定位:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position-fixed</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
}
p#about {
position: fixed;
top: 20px;
right: 20px;
}
#page-wrap {
width: 800px;
background: white;
margin: 0 auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
#fixed-letters {
position: fixed;
top: 200px;
left: 100px;
background: url(attachments/month_0904/r2009425232639.gif) white no-repeat;
width: 800px;
height: 150px;
}
#scroll-letters {
position: relative;
top: 1200px;
left: 100px;
background: url(attachments/month_0904/j2009425232654.gif) top center no-repeat;
width: 800px;
height: 825px;
}
</style>
</head>
<body>
<p id="about">by wulinfo: <a href="http://www.52css.com/"><strong>去骂两句</strong></a></p>
<div id="fixed-letters">
</div>
<div id="scroll-letters">
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8214144-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>