Question

如何修复div但相对距离相近？（比如Facebook聊天窗口）。

但是，聊天窗口是一个在另一个上面（不是并排:(），所以，如何做到这一点？只有CSS可以实现吗？

＆＃13;

.chat_window {
  position: fixed;
  right: 0px;
  bottom: 0px;
  width: 280px;
  height: 380px;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 999;
}
.chat_header {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #000;
}
.chat_header span {
  font-size: 12px;
  margin-left: 10px;
}

＆＃13;

<div class='chat_window'>
  <div class='chat_header'>
    <span>One name...</span>
  </div>

  <div class='chat_body'>
    <span> a chat window</span>
  </div>
</div>

<div class='chat_window'>
  <div class='chat_header'>
    <span>Other name...</span>
  </div>

  <div class='chat_body'>
    <span> other chat window</span>
  </div>
</div>

＆＃13;

Answer 1

<强> TLDR;

您无法使用position: fixed;执行此操作，但您可以使用具有固定位置的单个块，并将聊天窗口保持对齐。

另一种选择是使用JavaScript，查看有关Facebook Style Chat Box Popup using JavaScript and CSS

的文章

.chat_area {
  position: fixed;
  right: 0px;
  bottom: 0px;
  text-align: right;
}
.chat_window {
  display: inline-block;
  width: 280px;
  height: 380px;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 999;
}
.chat_header {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #000;
}
.chat_header span {
  font-size: 12px;
  margin-left: 10px;
}

<div class="chat_area">
  <div class='chat_window'>
    <div class='chat_header'>
      <span>One name...</span>
    </div>

    <div class='chat_body'>
      <span> a chat window</span>
    </div>
  </div>

  <div class='chat_window'>
    <div class='chat_header'>
      <span>Other name...</span>
    </div>

    <div class='chat_body'>
      <span> other chat window</span>
    </div>
  </div>
</div>

Answer 2

我想不出任何纯粹用CSS做这件事的明显方法。如果可以添加父div，那么我建议这样做。这是一个简单的解决方案，您可以为父容器提供固定位置并使子项向右浮动。这应该会给你你想要的效果：

＆＃13;

#chat_parent{
  position: fixed;
  bottom: 0px;
  right: 0px;
}
.chat_window
{
  float:right;
  width: 280px;
  height: 380px;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 999;
}

.chat_header
{
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #000;
}

.chat_header span
{
  font-size: 12px;
  margin-left: 10px;
}

＆＃13;

<div id="chat_parent">
  <div class='chat_window'>
    <div class='chat_header'>
      <span>One name...</span>
    </div>
    <div class='chat_body'>
      <span> a chat window</span>
    </div>
  </div>
  <div class='chat_window'>
    <div class='chat_header'>
      <span>Other name...</span>
    </div>
    <div class='chat_body'>
      <span> other chat window</span>
    </div>
  </div>
</div>

＆＃13;

如果我找到仅限CSS的解决方案，我会更新/删除我的答案。

固定div但相对保证金像Facebook聊天窗口

2 个答案: