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="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>