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

Question

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

问题#1:元素的高度不同，较小的元素与最高元素的顶部垂直对齐。 fiddle :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:使用

display: inline-block; vertical-align: bottom;

要将 div 与页面底部对齐，第一个(最小)聊天框上的链接( anchor )不可点击，因为父容器与链接重叠。并且不可能为聊天容器设置比后面的内容更低的 z-index，因为聊天框是聊天容器的子项，并且它们必须具有比页面内容更高的 z-index。如何解决这个问题？
显示此问题的 fiddle : http://jsfiddle.net/xw689yv8/

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

Answer 1

使用 pointer-events: none 在容器上；它下面的元素现在可以点击。

用display: inline-block在固定容器内排列聊天框和 vertical-align: bottom .

聊天框获得 pointer-events: auto所以他们和他们的 child 可以被点击。

对于 IE10 及以下版本，请查看 this answer to an older question转移点击事件。
例子
全屏查看并选择位于隐形容器下方的文本输入。

.under {
  position: absolute;
  bottom: 200px;
  right: 200px;
}
#container {
  position: fixed;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.chat {
  border: 1px solid #999;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  margin: 0 5px;
  pointer-events: auto;
}
.title {
  padding: 0.5em;
  background-color: blue;
  color: white;
}
.text {
  padding: 10px;
}

<div class="under">
  <input type="text" value="select me!" />
</div>

<div id="container">
  <div class="chat">
    <div class="title">This is the chat title</div>
    <div class="text">
      <p>Text 1</p>
      <p>Text 2</p>
      <p>Text 3</p>
    </div>
    <div class="chatbox">
      <input type="text" />
    </div>
  </div>
  <div class="chat">
    <div class="title">This is the chat title</div>
    <div class="text" style="height:250px">
      <p>Text 1</p>
      <p>Text 2</p>
      <p>Text 3</p>
    </div>
    <div class="chatbox">
      <input type="text" />
    </div>
  </div>
</div>