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:使用方法

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

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

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

Answer 1

• pointer-events: none在容器上使用; 它下面的元素现在可以点击了.

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

• 聊天框pointer-events: auto可以点击他们和他们的孩子.

对于IE10及更低版本,请查看旧问题的答案以转移点击事件.

例

全屏查看并选择位于隐形容器下方的文本输入.

.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>