Plusieurs couches de positionnement absolu

Question

Je crée une mise en page de flux de commentaires, avec une barre en arrière-plan qui a une position: absolue. Les éléments de commentaire sont placés au-dessus de la barre. Cela fonctionne bien, mais j'aimerais aussi que les gens puissent mentionner d'autres utilisateurs dans le commentaire. Le menu déroulant qui s'ouvre lors de la frappe @ est toutefois placé derrière le commentaire consécutif. Le menu déroulant utilise également position: absolute alors que le commentaire a une position: relative. Maintenant, il semble que ces couches multiples ne fonctionnent pas bien ensemble.

<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> 

Mon CSS ressemble à ceci:

.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; 
    } 
} 

Je recréés le problème dans un enclos de code: https://codepen.io/timolemow/pen/eEKVLN

Toute aide grandement appréciée! Merci.

Answer 1

Vous devez supprimer la position relative sur tous div.comment et ajouter seulement sur le premier.

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

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