HTML/CSS : Clickable link over a larger link

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

您不能嵌套 anchor 元素。这是无效的 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.

最好的解决方案是放置第一个链接，使其填满整个容器/包装器，然后将另一个链接放置在它上面。

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>