DIV+CSS图片绝对底部定位且不随滚动条滚动的方法

摘要做一个网站项目时遇到的关于图片绝对底部定位且不随滚动条滚动的问题,此方法是利用css和javascript相结合,再针对不同浏览器的特性各个突破以实现良好的兼容性。此方法可举一反三,同样适用于图片任何位置的固定,对css稍作更改即可。

这阵子做一个网站项目,遇到一个DIV+CSS布局中图片绝对底部定位且不随滚动条滚动的问题,偷下懒,直接找了几个版本的代码,有Javascript的,也有纯CSS的,都有或多或少的浏览器兼容问题。值得一提的是,IE6真是很让人头痛,早就该被淘汰,就它事最多!我将几段代码综合了下,终于找到一个实现图片绝对底部定位且不随滚动条滚动的最好方法,现在就给大家分享一下。废话少放,直接上代码,如下:

<style type="text/css">
#lee{z-index:100;background:#F16280; width:100%; position:fixed; height:31px; left:0; bottom:0;}
</style>
<!--[if lte IE 6]>
<script type="text/javascript">
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){
cot_t1_DOCtp="_top:expression_r_r_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression_r_r_r(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";
}else{
cot_t1_DOCtp="_top:expression_r_r_r(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression_r_r_r(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";
}
var lee_bodyCSS='* html {}';
var leeCSS='#lee {position:fixed;';
var leeCSS=leeCSS+'_position:absolute;';
var leeCSS=leeCSS+'width:100%;';
var leeCSS=leeCSS+'bottom:0px;';
var leeCSS=leeCSS+'right:0px;';
var leeCSS=leeCSS+'clip:rect(0 100% 100% 0);';
var leeCSS=leeCSS+cot_t1_DOCtp;
document.write('<style type="text/css">'+lee_bodyCSS+leeCSS+'</style>');
</script>
<![endif]-->
<!--[if lte IE 7]>
<script type="text/javascript">
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){
cot_t1_DOCtp="_top:expression_r_r_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression_r_r_r(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";
}else{
cot_t1_DOCtp="_top:expression_r_r_r(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression_r_r_r(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";
}
var lee_bodyCSS='* html {}';
var leeCSS='#lee {position:fixed;';
var leeCSS=leeCSS+'_position:absolute;';
var leeCSS=leeCSS+'width:100%;';
var leeCSS=leeCSS+'bottom:0px;';
var leeCSS=leeCSS+'right:0px;';
var leeCSS=leeCSS+'clip:rect(0 100% 100% 0);';
var leeCSS=leeCSS+cot_t1_DOCtp;
document.write('<style type="text/css">'+lee_bodyCSS+leeCSS+'</style>');
</script>
<![endif]-->

<!--[if lte IE 8]>
<script type="text/javascript">
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){
cot_t1_DOCtp="_top:expression_r_r_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression_r_r_r(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";
}else{
cot_t1_DOCtp="_top:expression_r_r_r(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression_r_r_r(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";
}
var lee_bodyCSS='* html {}';
var leeCSS='#lee {position:fixed;';
var leeCSS=leeCSS+'_position:absolute;';
var leeCSS=leeCSS+'width:100%;';
var leeCSS=leeCSS+'bottom:0px;';
var leeCSS=leeCSS+'right:0px;';
var leeCSS=leeCSS+'clip:rect(0 100% 100% 0);';
var leeCSS=leeCSS+cot_t1_DOCtp;
document.write('<style type="text/css">'+lee_bodyCSS+leeCSS+'</style>');
</script>
<![endif]-->

//使用方法如下

<div id="lee"><a href="#" target="_blank"><img src="这里是图片地址" /></a></div>

最后,说明一下,此方法是利用css和javascript相结合,再针对不同浏览器的特性各个突破以实现良好的兼容性。应用于实例时,请将上述代码封装进JS中,然后放在在HTML的....</body>之前,不建议在<head>头部引用,影响页面加载速度!当然,此方法也可举一反三,同样适用于图片任何位置的绝对定位问题,只需对css稍作更改即可。

给我留言

图片 表情