html - 多层绝对定位

我正在创建一个注释流布局，该布局的背景中有一个位置为绝对的栏。注释项位于栏的顶部。效果很好，但我也希望人们能够在评论中提及其他用户。
键入@时将打开的下拉菜单位于连续注释的后面。下拉菜单还使用position：absolute，而注释具有position：relative。现在看来，这些多层不能很好地协同工作。

<div class="timeline">
  <div class="comment">
    <input placeholder="mention someone with @username">
    <div class="mention-dropdown">
      <div class="mention">username</div>
      <div class="mention">username</div>
      <div class="mention">username</div>
      <div class="mention">username</div>
      <div class="mention">username</div>
    </div>
  </div>
  <div class="comment">
    some comment text
  </div>
  <div class="comment">
    some comment text
  </div>
  <div class="comment">
    some comment text
  </div>
  <div class="comment">
    some comment text
  </div>
  <div class="comment">
    some comment text
  </div>
  <div class="comment">
    some comment text
  </div>
  <div class="background">
    <div class="bar"></div>
  </div>
  <div class="start">
    start
  </div>
</div>

我的CSS看起来像这样：

.timeline {
  .comment {
    input {
      width: 100%;
    }
    z-index: 10;
    width: 300px;
    border: 1px solid gray;
    border-radius: 5px;
    background-color: rgb(102, 255, 255);
    padding: 10px;
    margin: auto;
    margin-bottom: 15px;
    position: relative;
    .mention-dropdown {
      width: 100%;
      position: absolute;
      background-color: gray;
      left: 0;
      z-index: 20;
    }
  }
  .background {
    height: 100%;
    width: 100%;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    .bar {
      top: 0;
      width: 0px;
      height: 100%;
      border: blue solid 2px;
      position: absolute;
      left: calc(50% - 3px);
    }
  }
  .start {
    left: calc(50% - 3px);
    position: absolute;
    bottom: 0;
    background-color: white;
  }
}

我用代码笔重新创建了问题：
https://codepen.io/timolemow/pen/eEKVLN

任何帮助，不胜感激！
谢谢。

最佳答案

您必须删除所有div.comment上的相对位置，并且仅在第一个位置上添加。

.timeline .comment-wrapper {
  position:relative;
}

https://codepen.io/anon/pen/rzKvpq