将可点击元素放置在可点击容器元素内

Question

I'm trying to make the #header div clickable by wrapping a link element around it, but I cannot do it when it already has another image link inside the div. How would I fix this?

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

Now while the image link works just fine, the #wrapper div is not clickable.

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> 

NOTES:

• If you wrap a hyperlink inside another hyperlink, how is the browser supposed to know which link to execute?

• Instead, make the #header element entirely clickable, and absolutely position the image.

• Now the image can be clicked separately and positioned anywhere inside the #header element.