Firefox，位置固定，滚动条

Question

在这个例子中如果我为div红色设置动画，它会向右移动一个奇怪的动作。我认为问题只出现在Firefox上，div是对的，有一个滚动条和位置固定。

（如果我使用位置绝对我解决了移动。但是如果用户滚动，div移动，它应该“固定”到右边，底部）

• 火狐
• 右键
• 滚动条
• 固定位置

请在此处查看： http://jsfiddle.net/LhAEh/1/

HTML：

<div id="blue"></div>
<div id="red"></div>

CSS：

#red {
    position: fixed; /* fixed genera el problema */ 
    bottom: 20px; right:25px;
    width:80px; height:50px;
    cursor:pointer; 
    background:red;
}

#blue {
    margin:0 auto;
    width:80px; height:500px;
    background:blue;
}

JQUERY：

$(function(){   
    $("#red").click(function() {
        $("#red").animate({bottom:'-80px'},1000);
    }); 
})

• 图片1：原始位置
• 图片2：当有人点击它时，向右移动然后向下移动。它应该只会向下移动

Answer 1

看起来找到了解决方法，将固定框的位置更改为绝对位置并将其放入另一个固定位置div： CSS fixed position movement under scrollbar in Firefox

此外，此问题还有一个漏洞：CSS position fixed no longer factors in scrollbar after hover

更新：找到了更好的解决方法，使用固定框的最小宽度而不是宽度：https://stackoverflow.com/a/15705522/980692

Answer 2

http://jsfiddle.net/CGkEU/2/

试试这个jsfiddle

.background{
    position:static;
}

Answer 3

这是你要找的吗？

Demo

.background{
    position:relative;
}

$(function(){       
    $("#red").click(function() {
        $("#red").animate({bottom:'15px'},1000);
        $("#red").css({"position":"absolute","right":"15px"});
    });     
})