絕對與相對的CSS定位

Question

我在我的HTML中有一個<a>標籤，我需要一個下拉菜單，當用戶點擊鏈接時總是顯示在下面。如果沒有click事件，它看起來是這樣的：

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

然而，孩子的div不與<a>標籤排隊，如果有之前的內容一個標籤。

如何確保下拉菜單始終出現在<a>標籤的下方，即使前面有內容？

Answer 1

不符合您在那裏的代碼。

當涉及到相對/絕對定位時，您已經錯過了一些東西。對於與相對定位元素對齊的絕對定位元素，相對元素必須是父級元素。那不是父母，是兄弟姐妹，並且不起作用。

要解決這個問題，你必須以某種方式重新考慮它。你可以使用JavaScript來始終元素與鏈接對齊，或者你可以像另一個div類似於這樣整個包住位：

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

和CSS是這樣的：

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