Position元素在当前窗口的右下角 [英] Position element at bottom right corner of current window

问题描述

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

  document.triggerNotification = function类型，消息）{
 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文档

I'm using the following code to send push notifications to the user...

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

The problem is that the element is not shown at the bottom right corner of where my screen is currently placed, it's showing at the bottom right corner of where the page originally loaded. I'm using the following 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);
    }

Ideally, if a user starts scrolling while the message is there it'd be nice of the element could move with it.

解决方案

position: fixed

• MDN documentation

这篇关于Position元素在当前窗口的右下角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！