Bağlantılarım neden HTML üst üste yığılıyor

Question

Farklı web sayfalarına bağlantıların bir resmin üzerine dikey olarak dizildiği bir web sitesine sahip olmak istiyorum, ancak bir nedenden ötürü bunlar birbirinin üzerine yığılmışlar. ancak aralarında bir <br> var. Eğer tüm bu unsurların kılmasını position:absolute; kullanma

.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

, o kaba bir elemanların üzerindeki stilleri eklemek, bağlantıları üzerinde genişlik/yükseklik çıkarın konteyner (.container_for_links) içine sarın olmak için .image-wrapper a seçici güncellemek kod:

.container_for_links a{ 
    display:block; 
} 

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

Answer 2

top:0; left:0; kullanarak aynı yerde yerleştirilmek üzere.

Bağlantıları başka bir elemana sarmak ve kesinlikle konumlandırmak. o zaman bu eklemek

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

Sonra .image-wrapper .links