css – 位置元素位于当前窗口的右下角

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

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

理想情况下,如果用户在消息出现时开始滚动,那么该元素可能会随之移动.

解决方法

position: fixed

> MDN documentation

原文地址：https://www.jb51.cc/css/217397.html