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

我认为'位置：固定;'是你的罪魁祸首。

Answer 2

我很确定你想要这样的东西：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添加并淡出旧的通知。

Answer 3

position: fixed;
right: 20px;
bottom: 20px;

当你将这个类应用于多个东西时，它们中的每一个都将在与右边相同的位置20px和从页面底部起20px的位置结束，这就是为什么它们最终相互叠加的原因。 / p>

您可能想制作一个占据页面整个右侧的单个容器或列，然后将其填入您的项目中。

使用CSS防止元素堆叠

3 个答案: