多层绝对定位答案

【问题标题】：Multiple layers of absolute positioning多层绝对定位
【发布时间】：2017-08-24 00:34:09
【问题描述】：

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

<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

非常感谢任何帮助！谢谢。

【问题讨论】：

从代码笔中很难分辨，但是有什么理由在 .mention-dropdown 上保持绝对定位？删除它会显示整个下拉列表。
是的，否则下拉会增加评论的大小，看起来很奇怪。因为它是一个下拉菜单，所以它不应该影响底层内容，而是将鼠标悬停在它上面。

标签： html css position absolute

【解决方案1】：

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

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

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

【讨论】：

问题仍然存在，栏现在在评论前面 - 但它应该在其他所有内容的后面。首先是条形图，顶部是 cmets，顶部是下拉菜单。
我尝试添加 z-index: -1;到 .background 在上面的 codepen 上，它似乎工作。如果这有效并被添加到上述答案中，那么它可能是完整的，希望如此。