jquery - 使用 CSS 防止元素堆叠

Question

当有多个以下元素时，它们会彼此重叠显示，就好像每个元素的 z-index 都不同一样。我希望它们靠在屏幕的右侧，向上移动到屏幕的一侧，然后当它们通过我的 javascript “消失”时让它们向下滑动到右上角……我希望说得通。我不确定完成此操作的最佳方法...

.push-notification {
    background-color: #000;
    position: fixed;
    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;
}

Answer 1

我敢肯定您会想要这样的东西:http://jsfiddle.net/z8nJk/2/

我们首先创建一个容器，充当通知的“队列”，然后将其粘贴到用户屏幕的右上角。 HTML 将如下所示:

<div id="side">
    <div class="push-notification">Your notification here</div>
</div>

您应该将 #side 定位到右上角，并使用 position: fixed。

#side {
    position: fixed;
    right: 10px;
    top: 10px;
}

然后像这样稍微修改通知代码:

.push-notification {
    background-color: #000;
    color: #fff;
    padding: 10px 15px 13px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    opacity: 0.7;
    filter: alpha(opacity=70);

    -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);

    width: 200px;
    font-family: Arial;

    font-size: 12px;
    line-height: 1.4em;
    margin-bottom: 10px;
}

最后是一些简单的 jQuery 来添加和淡出旧的通知。