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

我有几个聊天框和其他div元素，需要放在屏幕底部，向右对齐

问题#1：元素的高度不同，较小的元素与最高元素的顶部垂直对齐。小提琴：

问题#2：使用

显示：内联块；垂直对齐：底部对齐

要将div与页面底部对齐，第一个（最小）聊天框上的链接（锚定）不可单击，因为父容器与链接重叠。而且，不可能将聊天容器的z索引设置为低于后面内容的z索引，因为聊天框是聊天容器的子项，它们的z索引必须高于页面内容。如何解决这个问题？ 显示此问题的小提琴：

摘要 如何强制所有div与屏幕右下角对齐，而不使聊天容器（聊天盒的父div）与聊天盒后面页面中的内容重叠，从而使其不可浏览？

• 在容器上使用；下面的元素现在可以点击了

• 使用

  显示：内联块

  和

  垂直对齐：底部

  在固定容器内排列聊天框

• 聊天框将获取

  指针事件：auto

  ，以便可以单击它们及其子对象

对于IE10及以下版本，请签出以传输单击事件

例子 全屏查看并选择位于不可见容器下方的文本输入

。在{
位置：绝对位置；
底部：200px；
右：200px；
}
#容器{
位置：固定；
底部：0；
右：0；
指针事件：无；
}
.聊天{
边框：1px实心#999；
显示：内联块；
垂直对齐：底部对齐；
位置：相对位置；
利润率：0.5px；
指针事件：自动；
}
.头衔{
填充：0.5em；
背景颜色：蓝色；
颜色：白色；
}
.文本{
填充：10px；
}

这是聊天标题
文本1

文本2

文本3

这是聊天标题
文本1

文本2

文本3

我不确定您要如何对齐它们，所以我将它们放在彼此上方

---

非常优雅的解决方案。以前从未听说过指针事件属性。感谢您的清晰快速的回复@亚当斯特鲁德威克-别担心。这是一个问题吗？一点也不，我不支持IE10及以下版本，因为它们只被少数客户使用。

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

#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; }