아래에서 위로 요소를 스택하십시오.

Question

알림 시스템에서 작업 중이며 맨 아래 오른쪽 구석에서 내 알림을 시작한 다음 오른쪽 상단 모서리에 쌓아두기를 원합니다. 어떻게해야합니까? 어떻게 화면 하단에서 시작해야합니까?

코드 : http://jsfiddle.net/2TdCx/

현재 CSS : 나는 수직으로 용기 및 상품 자체를 뒤집어 에 CSS3 rotate transform을 사용하고 생각할 수

#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

유일한 방법.

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

이 쉽게 IE8 및 IE9 당신이 다른 방법을 찾기 위해해야 ​​할 수도 있습니다 도랑 할 준비가 그렇게하지 않는 한, flexbox와 flexboxisn't very good에 대한 그러나 지원을 수행합니다.

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

.child { 
    /* whatever */ 
} 

을 그리고 그게 전부입니다 :

다음은 어떻게하는지입니다. 간단 하죠? 잘 whole lot more that's great about flexbox가 있습니다. 그래서 기대할만한 것이 있습니다. 당신이 그것을 뺀 위치를 가지고있는 것처럼 http://codepen.io/Mest/pen/Gnbfk