Prevent element stacking with CSS

Question

When there are multiple of the following element they are shown right on top of each other, as if the z-index is different on each element. I'd like for them to stack up against the right side of the screen, going up the side of the screen and then as they "fade away" via my javascript for them to slide down to the right corner... I hope that makes sense. I'm not sure the best method to accomplish this...

.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

I think 'postion: fixed;' is your culprit.

Answer 2

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

When you apply this class to multiple things, each of them are going to end up in the exact same location 20px from the right and 20px from the bottom of the page which is why they end up on top of one another.

You probably want to make a single container or column that takes up the entire right side of your page and then fill it with your items.

Answer 3

I'm pretty sure you'd want something like this: http://jsfiddle.net/z8nJk/2/

We first create a container that acts like a "queue" for the notifications, then stick it to the top right corner of the user's screen. The HTML will look like this:

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

You should position #side to the top right corner with position: fixed.

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

Then modify the notification code slightly like this:

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

And finally some simple jQuery to add and fade away the old notifications.