HTML/CSS: Clickable link over a larger link

I have the following code

<a href="">
<div style="position: relative; z-index: -2; background-color:#333; height:200px;">
  <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="" alt="Dice" />
  <div style="position: absolute; top: 0;left: 0; padding:5px; z-index:3; border: 1px solid red;" >
    <a href="" style="color:#fff;">Can you click me?</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.


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=""></a>
  <img src="" alt="Dice" />
  <a class="top-left" href="">Can you click me?</a>