CODEWITHSUNDEEP
htmlcss
TheMeisterSE
TheMeisterSE

Reputation: 541

Stack elements from bottom to top

I am working on a notification system and I want my notifications to start at the bottom right corner and then stack up to the top right corner. How do I do that? Like how do I force it to start at the bottom of the screen?

Code: http://jsfiddle.net/2TdCx/

Current CSS:

#notifications {
width: 280px;
right: 0;
bottom: 0;
float: right;
position: fixed;
z-index: 9999;
height: 100%;
top: 40px;
margin-right: 3.5px;
}

.notification {
font-size: 12px;
width: 270px;
min-height: 20px;
background: #000;
color: #FFF;
border-radius: 6px;
padding-left: 10px;
padding-top: 2.5px;
padding-bottom: 2.5px;
margin-top: 10px;
opacity: 0.8;
}

Upvotes: 1

Views: 484

Answers (2)

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

This is easily done with flexbox, however the support for flexbox isn't very good, so unless you're ready to ditch IE8 and IE9 you may need to look for another method.

Here's how it's done:

.parent {
  display: flex;
  flex-direction: column-reverse;
}

.child {
  /* whatever */
}

And that's all there is to it. Simple, huh? Well there's a whole lot more that's great about flexbox so there's that to look forward to.

Here's an example of this with some basic styling: http://codepen.io/Mest/pen/Gnbfk

Upvotes: 3

Itay
Itay

Reputation: 16777

The only way I can think of is using CSS3 rotate transform to vertically flip the container and the items themselves.

jsFiddle Demo

#notifications, .notification {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
         -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

Upvotes: 4

Related Questions