Question

我正在创建一个评论流布局，它在背景中有一个位置为：绝对的栏。评论项目放在栏的顶部。这很好，但我也希望人们能够在评论中提及其他用户。键入@时打开的下拉菜单会放在连续注释后面。下拉菜单也使用position：absolute，而注释的位置为：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.com上的相对位置，并仅在第一个上添加。

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

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

多层绝对定位

1 个答案: