纯CSS打造静态定位(fixed)解决方案

IE6下fixed定位不好用?

用expression定位又老闪烁?

相对网站主体定位不知从何下手?

在网站主体两边放点辅助还得写JS?

 

一切以实例说话

<!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>用纯CSS静态定位</title>
<style type="text/css">
* {padding:0; margin:0;}
*html { background-attachment:fixed; background-image:URL("about:blank");}
.lt,.rt,.lb,.rb,.zt_l,.zt_r {border:1px solid #00F;}
.lt {position:fixed; top:0px; left:0px; width:150px;_position:absolute; 
_top:expression(eval(document.documentElement.scrollTop+0)); 
_left:expression(eval(document.documentElement.scrollLeft+0));
}
.rt {position:fixed; top:0; right:0; width:150px; _position:absolute; 
_top:expression(eval(document.documentElement.scrollTop+0)); 
_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth));
}
.lb {position:fixed; bottom:0; left:0; width:150px; _position:absolute; 
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); 
_left:expression(eval(document.documentElement.scrollLeft+0));
}
.rb {position:fixed; bottom:0; right:0;  width:150px; _position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); 
_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth));
}
.zt_l {position:fixed; top:150px; right:300px; margin-right:50%; width:50px; _position:absolute; 
_top:expression(eval(document.documentElement.scrollTop+150));}
.zt_r {position:fixed; top:150px; left:300px; margin-left:50%; width:50px; _position:absolute;
_top:expression(eval(document.documentElement.scrollTop+150));}

</style>
</head>
<body>
<div style="width:600px; margin:0 auto; border:1px solid #000; min-height:1000px; height:100%; _height:1000px; text-align:center;">
    <p style="line-height:100px; font-size:40px; font-weight:bold; color:#000;">这里是网站的主体,宽600px</p>
    <p style="line-height:100px; font-size:40px; font-weight:bold; color:#333;">这里是网站的主体,宽600px</p>
    <p style="line-height:100px; font-size:40px; font-weight:bold; color:#666;">这里是网站的主体,宽600px</p>
    <p style="line-height:100px; font-size:40px; font-weight:bold; color:#999;">这里是网站的主体,宽600px</p>
    <p style="line-height:100px; font-size:40px; font-weight:bold; color:#ccc;"><a href="http://www.cnblogs.com/whyoop">欢迎来访我的BLOG</a></p>
</div>
<div class="lt">
    我在一直在左上角
</div>
<div class="rt">
    我在一直在右上角
</div>
<div class="lb">
    我在一直在左下角
</div>
<div class="rb">
    我在一直在右下角
</div>

<div class="zt_l">
    <span>我在左边贴着网站主体</span>
</div>
<div class="zt_r">
    <span>我在右边贴着网站主体</span>
</div>

</body>
</html>

posted on 2012-08-10 15:36  cnwhy  阅读(850)  评论(0)  编辑  收藏  举报

导航