文本流由绝对定位元素中断

Question

我正在尝试构建一个聊天框，并在消息div中定位到达时间 通过将其定位为绝对并将其相对于父级放置，但它与聊天内容重叠。如何定位到达的时间跨度，使其不与消息重叠并保持在各自的位置

HTML

<div class="chat-box">
  <input type="checkbox" />
  <label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
  <div class="chat-box-content">
    <div class="msgWrapper">
      <div class="msgwrapperleft">
        <div class="icon">
          <img src="http://placehold.it/40X40"></img>
        </div>
        <div class="Message">Message from Client
          <span class="ArrivedTime">1 minute ago</span>
        </div>

      </div>
    </div>

    <div class="msgWrapper">
      <div class="msgwrapperleft">
        <div class="icon">
          <img src="http://placehold.it/40X40"></img>
        </div>
        <div class="Message">Message from Client
          <span class="ArrivedTime">1 minute ago</span>
        </div>

      </div>
    </div>
    <div class="msgWrapper">
      <div class="msgwrapperleft">

        <div class="Message">Message from Client
          <span class="ArrivedTime">1 minute ago</span>
        </div>
        <div class="icon">
          <img src="http://placehold.it/40X40"></img>
        </div>

      </div>
    </div>
  </div>
  <input type="text" />
</div>

CSS

body {
    height:3000px
}
.chat-box {
    font:normal normal 11px/1.4 Tahoma, Verdana, Sans-Serif;
    color:#333;
    width:300px;
    /* Chatbox width */
    border:1px solid #344150;
    border-bottom:none;
    background-color:white;
    position:fixed;
    right:10px;
    bottom:0;
    z-index:9999;
    -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
    -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
    box-shadow:1px 1px 5px rgba(0, 0, 0, .2);
    border-top-left-radius:4px;

}
.chat-box > input[type="checkbox"] {
    display:block;
    margin:0 0;
    padding:0 0;
    position:absolute;
    top:0;
    right:0;
    left:0;
    width:100%;
    height:26px;
    z-index:4;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    border-top-left-radius:4px;
}
.chat-box > label {
    display:block;
    height:24px;
    line-height:24px;
    background: url(http://i60.tinypic.com/244tirb.jpg) -100% 0 #24201a;
    color:white;
    font-weight:bold;
    padding:0 1em 1px;
    border-top-left-radius:4px;
}
.chat-box > label:before {
    content:attr(data-collapsed)
}
.chat-box .chat-box-content {
    padding:10px;
    display:none;
    overflow-y:scroll;
}
/* hover state */
 .chat-box > input[type="checkbox"]:hover + label {
    background-color:#404D5A
}
/* checked state */
 .chat-box > input[type="checkbox"]:checked + label {
    background-color:#212A35
}
.chat-box > input[type="checkbox"]:checked + label:before {
    content:attr(data-expanded)
}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {
    display:block
}
span {
    display: inline-block;
    max-width: 200px;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-color: grey;
}
left {
    float: left;
}
span.left:after {
    content:"";
    display: inline-block;
    position: absolute;
    left: -8.5px;
    top: 7px;
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid white;
}
span.left:before {
    content:"";
    display: inline-block;
    position: absolute;
    left: -9px;
    top: 7px;
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid black;
}
span.right:after {
    content:"";
    display: inline-block;
    position: absolute;
    right: -8px;
    top: 6px;
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #dbedfe;
}
span.right:before {
    content:"";
    display: inline-block;
    position: absolute;
    right: -9px;
    top: 6px;
    height: 0px;
    width: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid black;
}
span.right {
    float: right;
    background-color: #dbedfe;
}
.clear {
    clear: both;
}
input[type="text"] {
    width:96%;
    margin:1%;
}
.msgWrapper {
    width:100%;
    padding:5px;
    float:left;
  position:relative;
    margin:0 0 2px  0;

}
.msgwrapperleft {
    float:left;
    width:100%;
    position:relative;

}
.iconright {
    float:left;
    width:18%;
    margin:1%;
}
.iconleft {
    float:right;
    width:18%;
    margin:1%;
}
 .iconleft img {
    border-radius:40px;
}
.iconright img {
    border-radius:40px;
}
.MessageRight {
  float:left;
    width:74%;
    padding:2%;
    margin:1%;


}
.MessageLeft {
  float:left;
    width:74%;
    padding:2%;
    margin:1%;

  text-align:right;

}
.Time {
    width:100%;
}
 .ArrivedTimeRight {

    position:absolute;
    bottom:-5px;
    right:2px;

     font-size:7px;
}
.ArrivedTimeleft
{

    position:absolute;
    bottom:-5px;
    left:2px;

     font-size:7px;
}
.chat-box:after {
    content:"";
    display: inline-block;
    position: absolute;
    right: -1px;
    top: -14px;
    height: 15px;
    width: 100px;
    background: url(http://i60.tinypic.com/244tirb.jpg) -100% 0 #24201a;
    border-top-left-radius:15px;
    border-top-right-radius:4px;

}

Demo

Answer 1

https://jsfiddle.net/tfyzao9j/6/

我将时间戳更改为position: relative;，并将其位置分别设置为bottom: 0;和left: 0;或right: 0;。