CSS将聊天框与屏幕底部对齐

Question

我有几个聊天框和其他div元素，需要定位在屏幕的底部，对齐到右边。

问题1:元素不具有相同的高度，较小的元素与最高元素的顶部垂直对齐。小提琴：http://jsfiddle.net/sd69jdxp/

#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; float: right; position: relative; margin: 0 5px; }

问题2:使用

显示:内嵌块；垂直对齐:底部；

要将div对齐到页面底部，第一个(最小)聊天框上的链接(锚)是不可点击的，因为父容器与链接重叠。而且不可能为聊天容器设置比对后面的内容更低的z索引，因为聊天框是聊天容器的子元素，它们必须具有比页面内容更高的z索引。如何解决这个问题呢？展示这个问题的小提琴：http://jsfiddle.net/xw689yv8/

如何强制所有div与屏幕右下角对齐，而不使聊天容器(聊天框的父div)与聊天框后面的页面中的内容重叠，从而使其不可点击？

Answer 1

我不知道你想怎么对它们，所以我把它们放在一起。

http://jsfiddle.net/ouu94tfv/

#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; right:0; position: absolute; bottom: 0; margin: 0 5px; display:inline-block; float:right;}
.title { padding: 0.5em; background-color: blue; color: white; }
.text { padding: 10px; }