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

时间:2010-09-21 13:53:36

标签: 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);
    }

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

6 个答案:

答案 0 :(得分:5)

position: fixed

答案 1 :(得分:1)

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

答案 2 :(得分:0)

尝试更改

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

并使用相同的脚本再次尝试。

答案 3 :(得分:0)

我认为jQuery无法读取外部样式表,所以你必须给div一个样式属性,或者用jQuery改变它:

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

答案 4 :(得分:0)

是的,您需要查看使用位置:已修复支持它的浏览器,因为IE6是现在唯一使用的浏览器,不仅仅是添加

* html .push-notification {
   position: absolute;
}

AFTER 通知的原始样式规则。

如果你想要一个javascript解决方案,你可以获得文件scrollTop / bottom并计算出离屏幕底部有多远来显示它。但是如果用户滚动

,你需要一个onscroll事件来移动它

答案 5 :(得分:0)

尝试将css更改为:

position: fixed;