CSSの絶対配置と相対配置

Question

私のHTMLに<a>というタグがあり、ユーザーがリンクをクリックしたときに常に下に表示する必要があります。クリックイベントがなければ、それはこのようなものになります。

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