从下往上堆栈元素

我正在使用通知系统，我希望我的通知从右下角开始，然后堆叠到右上角。我怎么做？像我如何强制它在屏幕底部开始？从下往上堆栈元素

当前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

从下往上堆栈元素

回答

相关问题