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>

目标是我可以点击＆＃34;你可以点击我吗？＃34;在包含div的其他任何地方去google和google时钟去雅虎。

我似乎无法使其发挥作用。

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>

HTML / CSS：更大链接上的可点击链接

1 个答案: