jquery - 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;
}

查询：

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

• 图 1：原始位置

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

Answer 1

好像找到了解决方法，将固定框的位置更改为绝对位置并将其放入另一个固定位置 div 中：Firefox 中滚动条下的 CSS 固定位置移动

此外，在这个问题上还有一个未解决的错误：CSS 位置固定不再影响悬停后的滚动条

更新：找到了更好的解决方法，使用 min-width 而不是 width 作为固定框：https ://stackoverflow.com/a/15705522/980692

Answer 2

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

试试这个jsfiddle

.background{
    position:static;
}

Answer 3

这是你要找的吗？

演示

.background{
    position:relative;
}

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