javascript - 将可点击元素放置在可点击容器元素中

Question

我试图通过在其周围包裹一个链接元素来使 #header div 可点击，但是当它在 div 中已经有另一个图像链接时我无法做到这一点。我该如何解决这个问题？

#header {
border: 1px solid red;
background-color: red;
}
img {
width: 50px;
height: 50px;
}

<a href = 'index.php'>
<div id = 'header'>

<a href = 'profile.php?username=$username'>
<img src = 'https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a> 

</div>
</a>

现在虽然图像链接工作正常，但 #wrapper div 不可点击。

Answer 1

#header {
    border: 1px solid red;
    background-color: red;
    position: relative;    /* establish nearest positioned ancestor for abs. positioning */
    height: 50px;
}

#header a:first-child { 
    display: block;
    height: 100%;
}

#header a:last-child {
    position: absolute;      /* image now independently clickable */
    top: 0;                  /* position image anywhere you want inside #header */
    left: 0;
}

img {
    width: 50px;
    height: 50px;
}

<div id='header'>
    <a href='index.php'></a>
    <a href='profile.php?username=$username'>
   	<img src='https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
    </a>
</div>

注意事项:

• 如果您将一个超链接包裹在另一个超链接中，浏览器应该如何知道要执行哪个链接？

• 相反，使 #header 元素完全可点击，并绝对定位图像。

• 现在可以单独单击图像并将其放置在 #header 元素内的任意位置。