HTML: clickable image in a relative div‏

I was struggling with a piece of code to make an image based link within a relative positioned div. The problem was the div overlapping the area of the link. The result was only a small part beeing clickable. After various non-workable solutions I finally added a z-index:1 and a relative position to the anchor to get it to work. The snippet below will demonstrate how to do it.

<div class="relative">
  <a style="position: relative; z-index: 1;" href="url">
    <img src="image.png" alt="" />
  </a>
</div>
.relative {
  position: relative;
  left: 50px;
  top: 50px;
  width: 20px;
}

Leave a Reply