CSS Positionierung absolut vs. relativ

Question

Ich habe ein <a> Tag in meinem HTML, das ich brauche ein Dropdown-Menü unten immer angezeigt werden, wenn der Benutzer auf den Link klickt. Ohne das Click-Ereignis, sieht es so etwas wie diese:

HTML

<a class="parent">Learn more</a> 
<div class="child">This is the stuff for learning more</div> 

CSS

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
} 

Allerdings ist das Kind div Futter nicht mit dem <a> Tag, wenn es vor der Gehalt eine Markierung.

Wie kann ich sicherstellen, dass das Dropdown-Menü immer unter dem <a>-Tag angezeigt wird, auch wenn bereits Inhalt vorhanden ist?

Answer 1

Nicht mit dem Code, den Sie dort haben.

Sie haben etwas übersehen, wenn es um relative/absolute Positionierung geht. Damit das absolut positionierte Element mit dem relativ positionierten Element ausgerichtet wird, muss das relative Element ein Elternelement sein. Das ist kein Elternteil, es ist ein Geschwister und wird nicht funktionieren.

Um dies zu beheben, müssen Sie es irgendwie überdenken. Sie könnten Sie Javascript verwenden, um immer das Element mit dem Link ausrichten, oder Sie können das ganze etwas in so etwas wie ein anderes div, ähnlich wie dies wickeln:

<div class="parent"> 
    <a>Learn more</a> 
    <div class="child">This is the stuff for learning more</div> 
</div> 

und CSS etwas wie folgt aus:

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    margin-top: 1.5em; // to clear the <a> 
}