Mehrere Ebenen der absoluten Positionierung

Question

Ich erstelle ein Kommentar-Stream-Layout, das eine Leiste im Hintergrund hat, die Position: absolut hat. Die Kommentarelemente werden oben auf der Leiste platziert. Das funktioniert gut, aber ich möchte auch, dass andere Nutzer im Kommentar erwähnt werden können. Das Dropdown-Menü, das bei der Eingabe von @ geöffnet wird, wird jedoch hinter den fortlaufenden Kommentar gesetzt. Das Dropdown-Menü verwendet auch position: absolute, während der Kommentar position: relative hat. Nun scheint es, dass diese mehreren Schichten nicht gut zusammenarbeiten.

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

Meine CSS sieht aus wie:

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

ich das Problem in einem Code-Stift neu: https://codepen.io/timolemow/pen/eEKVLN

Jede Hilfe sehr zu schätzen! Danke.

Answer 1

Sie müssen die Position relativ zu allen Div-Funktionen entfernen und nur zur ersten hinzufügen.

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

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