Элементы стека снизу вверх

Question

Я работаю над системой уведомлений, и я хочу, чтобы мои уведомления начинались в нижнем правом углу, а затем складывались в верхний правый угол. Как мне это сделать? Как я могу заставить его начать в нижней части экрана?

Код: http://jsfiddle.net/2TdCx/

Текущий 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; 
} 

Answer 1

Единственный способ, которым я могу думать использует CSS3 rotate transformк вертикально флип контейнер и сами предметы.

jsFiddle Demo

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

• P.S - Обратите внимание на то, что это CSS свойство имеет некоторые browser support issues.

Answer 2

Это легко сделать с flexbox, однако поддержка flexboxisn't very good, так что если вы не готовы к канаве IE8 и IE9 вам, возможно, придется искать другой метод.

Вот как это делается:

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

.child { 
    /* whatever */ 
} 

И это все, что есть в ней. Просто, да? Хорошо, есть whole lot more that's great about flexbox, так что есть что с нетерпением ждать.

Вот пример этого с некоторым основным стилем: http://codepen.io/Mest/pen/Gnbfk