從下往上堆棧元素

我正在使用通知系統，我希望我的通知從右下角開始，然後堆疊到右上角。我怎麼做？像我如何強制它在屏幕底部開始？從下往上堆棧元素

當前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; 
}

來源

2013-09-23 TheMeisterSE

看起來像你有它減去位置：固定; – Keith

贊這個http://jsfiddle.net/j08691/2TdCx/1/？ – j08691

我能想到的是使用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。

來源

2013-09-23 18:45:15 Itay

這是很容易與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

來源

2013-09-23 19:22:42

+1非常好的解決方案。不知道 – Itay

從下往上堆棧元素

回答

相關問題