网页右下角固定图片（不随滚动条滑动，始终在固定位置）

方法一：CSS实现：

优点：不会由于屏幕分辨率不同出现问题

缺点：没有滑动效果，不支持IE6

Html代码：

<div style="position: fixed; bottom: 60px; right: 20px; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid; z-index: 9999; ">
                    <img src="@Url.Content("~/Content/images/acfe963a2d127dc9b21a8c116a13a63c.png")" />   
                </div>

 

方法二：CSS实现：

优点：不会由于屏幕分辨率不同出现问题

缺点：没有滑动效果，元素不会随着屏幕滚动而一直在右下角

<div style="position:absolute; bottom:60; right:20; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid; z-index: 9999; ">
                    <img src="@Url.Content("~/Content/images/acfe963a2d127dc9b21a8c116a13a63c.png")" />   
                </div>

 

方法三：JS实现：

优点：会有滑动效果。

缺点：实际应用中显示屏分辨率不同会出现滚动条无限下拉的情况，如果显示在屏幕中间应该不会出现问题

 

web页面Html代码：

<div id="FloatDIV" style="position: absolute;top: 0px; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid; z-index:9999">
                    <img src="@Url.Content("~/Content/images/acfe963a2d127dc9b21a8c116a13a63c.png")" />   
                    </div>

Js代码：

var MarginLeft = 50;    //浮动层离浏览器右侧的距离
var MarginTop = 500';   //浮动层离浏览器顶部的距离
var Width = 105;            //浮动层宽度
var Heigth = 105;           //浮动层高度

//设置浮动层宽、高
function Set() {
    document.getElementById("FloatDIV").style.width = Width + 'px';
    document.getElementById("FloatDIV").style.height = Heigth + 'px';
}

//实时设置浮动层的位置
function Move() {
    var b_top = window.pageYOffset
            || document.documentElement.scrollTop
            || document.body.scrollTop
            || 0;
    var b_width = document.body.clientWidth;
    document.getElementById("FloatDIV").style.top = b_top + MarginTop;
    document.getElementById("FloatDIV").style.left = b_width - Width - MarginLeft + 'px';
    setTimeout("Move();", 100);
}