Why do my links stack on top of each other in HTML

Question

I want to have a website where the links to different webpages are lined up vertically on top of an image, but for some reason they are stacked on top of each other even though I have a <br> in between them.

.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

Remove your width/height on links, wrap them inside container (.container_for_links), add styles that you have on a elements to that container then add this code:

.container_for_links a{
  display:block;
}

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

Answer 2

Using position:absolute; you are instructing all of these elements to be placed in the same place using top:0; left:0;.

How about wrapping the links in another element and positioning it absolutely.

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

Then update your .image-wrapper a selector to be .image-wrapper .links