多层绝对定位

Question

我正在创建一个评论流布局，它在背景中有一个位置为:绝对的栏。注释项被放置在栏的顶部。这很好用，但我也希望人们能够在评论中提到其他用户。然而，输入@时将打开的下拉菜单被放置在连续的注释之后。下拉菜单也使用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

非常感谢您的帮助！谢谢。

Answer 1

你必须删除所有div.comment上的相对位置，只在第一个上添加。

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

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