リンクがHTMLの上に重なり合っている理由

Question

異なるウェブページへのリンクが画像の上に縦に並んでいるウェブサイトを作りたいと思っていますが、それらの間には<br>があります。 position:absolute;を使用して

.image-wrapper { 
 
    position: absolute; 
 
    width: 250px; 
 
} 
 
.image-wrapper a { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    padding: 20px; 
 
    border: 0; 
 
    width: 98px; 
 
    height: 30px; 
 
    color: #FFF; 
 
    margin: 0px; 
 
    text-decoration: none; 
 
    font-family: "Abel"; 
 
    font-size: 160%; 
 
}

<div class="image-wrapper"> 
 
    <img src="side bar.png" alt="sometext" /> 
 
    <a href="harsh_projects.html"> Projects </a> 
 
    <br> 
 
    <a href="harsh_resume.html"> Resume </a> 
 
    <br> 
 
    <a href="harsh_contact.html"> Contact Me </a> 
 
</div>

Answer 1

リンク上のあなたの幅/高さを外し、コンテナ（.container_for_links）の内部でそれらをラップし、あなたがそのコンテナに要素の上に持ってスタイルを追加するあなたの.image-wrapper aセレクタを更新し、これを追加コード：

.container_for_links a{ 
    display:block; 
} 

https://jsfiddle.net/ty1u08kt/2/

Answer 2

あなたはtop:0; left:0;を使用して同じ場所に配置するためにこれらすべての要素を指示しています。

リンクを別の要素にラップし、絶対に配置するのはどうですか？その後

<div class="image-wrapper"> 
    <img src="side bar.png" alt="sometext" /> 
    <div class="links"> 
     <a href="harsh_projects.html"> Projects </a> 
     <br> 
     <a href="harsh_resume.html"> Resume </a> 
     <br> 
     <a href="harsh_contact.html"> Contact Me </a> 
    </div> 
    </div> 

.image-wrapper .links