将元素定位在当前窗口的右下角

Question

我正在使用以下代码向用户发送推送通知...

document.triggerNotification = function (type, message) {
    jQuery(document.body).append("<div class='push-notification hide push-"+type+"' id='notification'>"+message+"</div>");
    jQuery('#notification').show().fadeOut(1200, function () {
        jQuery('#notification').remove();
    });
}

问题是元素并没有显示在屏幕当前所在位置的右下角，而是显示在页面最初加载位置的右下角。我使用了以下CSS：

.push-notification {
    background-color: #000;
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #fff;
    padding: 15px 15px 15px 30px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: 7px center;
    opacity: 0.7;
    filter: alpha(opacity=70);
    vertical-align: middle;
    box-shadow: 4px 4px 4px #000;
    -webkit-box-shadow: 4px 4px 4px #000;
    -moz-box-shadow: 4px 4px 4px #000;
}
    .push-check {
        background-image: url(/image/icons/accept.png);
    }
    .push-x {
        background-image: url(/image/icons/accept.png);
    }

理想情况下，如果用户在消息存在的时候开始滚动，那么元素可以随消息一起移动就好了。

Answer 1

position: fixed

• MDN documentation

Answer 2

如果只需要支持现代浏览器，可以尝试将元素的CSS position属性设置为"fixed“。

Answer 3

尝试更改

body{
margin: 0;
}
body > .push-notification {
     position: fixed;
}

并使用相同的脚本重试。