Question

<div id="admin_chatRoom">
   <div class="msg_box admin-msg-box 1444055123841" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444055123841" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box 1444055193984" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444055193984" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box 1444112696240" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444112696240" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box 1444123878925" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444123878925" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap" style="display: none;">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
</div>

Css：

.msg_head{
    background:#f39c12;
    color:white;
    padding:15px;
    font-weight:bold;
    cursor:pointer;
    border-radius:5px 5px 0px 0px;
}
#admin_chatRoom .msg_head{
   background: #d35400
}

.msg_box{
    width:250px;
    background:white;
    border-radius:5px 5px 0px 0px;
}
.admin-msg-box {
    margin-right: 7px;
}
.client_area,#admin_chatRoom{
    position:fixed;
    bottom:-5px;
}
.msg_head{
    background:#3498db;
}

.msg_body{
    background:white;
    height:200px;
    font-size:12px;
    padding:15px;
    overflow:auto;
    overflow-x: hidden;
}
.msg_input{
    width:100%;
    border: 1px solid white;
    border-top:1px solid #DDDDDD;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;  
}
#admin_chatRoom{
    width:100%;

}

Jquery的：

 $(document).on("click", ".msg_head", function () {
        $(this).next('.msg_wrap').slideToggle('slow');
    });

这适用于单个聊天框。当.msg_wrap隐藏时，然后.msg_head会移到底部。但是对于不止一个，隐藏聊天框的.msg_head浮动显示的聊天框的上层。我想参考图片来展示我的情况：

在上图中，所有隐藏的msg_head都浮动在活动聊天框的级别。但是我想在底部隐藏聊天框的头部。任何的想法？如果这是一个不应该在这里提出的问题，我很抱歉。

Answer 1

您需要使用以下css

.admin-msg-box {
    margin-right: 7px;
    position: absolute;
    bottom: 0;
    right:0;
}

然后使用JS设置框的正确位置

将所有子div放在父div的底部

1 个答案: