HTML/CSS: Clickable link over a larger link

I have the following code

<a href="http://yahoo.com">
<div style="position: relative; z-index: -2; background-color:#333; height:200px;">
  <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />
  <div style="position: absolute; top: 0;left: 0; padding:5px; z-index:3; border: 1px solid red;" >
    <a href="http://google.com" style="color:#fff;">Can you click me?</a>
  </div>
</div>
</a>

The goal is that I can click the “can you click me” box and go to google and clock anywhere else in the containing div to go to yahoo.

I can’t seem to make it work.


solution

You can’t nest anchor elements. It’s invalid HTML.

12 Links - 12.2.2 Nested links are illegal

Links and anchors defined by the a element must not be nested; an a element must not contain any other a elements.

The best solution would be to position the first link so that it fills the entire container/wrapper, and then position the other link above it.

Example Here

.wrapper {
  position: relative;
  background-color: #333;
  height: 200px;
}
.wrapper .fill-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.top-left {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: 1px solid #f00;
  color: #fff;
  padding: 0.4em;
}
<div class="wrapper">
  <a class="fill-wrapper" href="http://yahoo.com"></a>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />
  <a class="top-left" href="http://google.com">Can you click me?</a>
</div>