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及更低版本，请查看this answer to an older question以转移点击事件。

实施例

全屏查看并选择隐藏在不可见容器下方的文字输入。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我不确定你要如何对齐它们，所以我把它们放在一起。

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

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

2 个答案:

实施例