防止使用CSS堆叠元素

当以下元素存在多个元素时，它们显示为彼此重叠，就好像每个元素上的z-index不同。我希望他们能够在屏幕右侧堆积起来，沿着屏幕边缘向前走，然后当他们“通过我的javascript消失”时，他们就会滑向右下角......我希望说得通。我不确定最好的方法来完成这个...防止使用CSS堆叠元素

.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; 
}

来源

2010-09-22 Webnet

添加一些html以及期待最好的结果。 – 2010-09-22 14:07:09

你是否希望整个堆叠随着每个新增添加而增加，或者将每个新堆叠添加到堆叠的顶部，并让旧堆叠从底部褪色和落下？ – Robusto 2010-09-22 14:09:34

每一个新的堆叠顶部，并有旧的褪色和从底部下降 - 当然 – Webnet 2010-09-22 14:22:22

我敢肯定你会想是这样的：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添加和消逝的旧通知。

来源

2010-09-22 14:36:05

我认为'postion：fixed''是你的罪魁祸首。

来源

2010-09-22 14:09:37 JohnK

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

当您申请该类多的东西，每个人都将结束在从页面底部的右侧和20像素的完全相同位置为20px这就是为什么他们最终在顶部另一个。

您可能希望制作一个容器或一列，占用页面的整个右侧，然后用您的项目填充它。

来源

2010-09-22 14:21:44 worpet

防止使用CSS堆叠元素

回答

相关问题