我正在使用以下代码向用户发送推送通知…
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