[英]Stack elements from bottom to top
我正在使用通知系统,我希望我的通知从右下角开始,然后堆叠到右上角。 我怎么做? 就像我如何强制它从屏幕底部开始?
代码: 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;
}
我能想到的唯一方法是使用CSS3 rotate transform
垂直翻转容器和项目本身。
#notifications, .notification {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.