HTML/CSS: Clickable ссылку на большую ссылку

Question

У меня есть следующий код

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

Цель состоит в том, что я могу нажать «вы можете нажать меня» окно и перейти на Google и часы где-нибудь еще в содержащий div, чтобы перейти к yahoo.

Я не могу заставить работать.

Answer 1

Вы не можете вставлять анкерные элементы. Это недопустимый HTML.

12 Links - 12.2.2 Nested links are illegal

Ссылки и якоря, определяемые a элемент не должен быть вложенными; элемент a не должен содержать никаких других элементов a.

Лучшим решением было бы расположить первое звено так, чтобы оно заполнило весь контейнер/обертку, а затем поместите другую ссылку над ним.

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>