html - 从下到上堆叠元素

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

我能想到的唯一方法是使用 CSS3rotate transform垂直翻转容器和项目本身。

jsFiddle 演示

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

• PS-注意这个 CSS 属性有一些浏览器支持问题。

Answer 2

这很容易做到flexbox，但是对 的支持flexbox 不是很好，所以除非你准备放弃 IE8 和 IE9，否则你可能需要寻找另一种方法。

这是如何完成的：

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

.child {
  /* whatever */
}

这就是它的全部。很简单吧？好吧，flexbox 还有很多很棒的地方，所以值得期待。

这是一个带有一些基本样式的示例： http: //codepen.io/Mest/pen/Gnbfk