The other day I posted an image, quite literally as a thought exercise, about how you might accomplish “nested” links. That is, a big container that is linked to one URL that contains a smaller container or text link inside of it that goes to another URL. That’s harder than it might seem at first glance. The main reason being that…
Eric Meyer once called for more flexible linking, but even that doesn’t quite handle a situation where one link is nested inside another.
Here’s what happens with that HTML, by the way:
The nested link gets kicked out.
My first inclination would be to simply not nest the links in the markup, but make them appear nested visually. Some folks replied to the tweet, including Nathan Smith, who shared that same thought: have a relatively positioned parent element and absolutely position both links. The larger one could fill up the whole area and the smaller one could sit on top of it.
See the Pen “Nested” links by Nathan Smith (@nathansmith) on CodePen.
It’s finicky, as you’ll need magic numbers to some degree to handle the spacing and variable content.
I have literally no idea how kosher that is from an accessibility perspective. It looks gross to me so I’m just going to assume it’s bad news.
Speaking of accessibility, Heydon Pickering has a whole article about card components which is a popular design pattern where this situation often comes up. His solution is to have a relatively positioned parent element, then a normally-placed and functional main link. That first link has an absolutely positioned pseudo-element on it covering the entire card. Any sub-links are relatively positioned and come after the initial link, so they’d sit on top of the first link by way of z-index.
Demo with author link.
And speaking of stacking pseudos, that’s the approach Sean Curtis uses here:
See the Pen Pretend nested links by Sean Curtis (@seancurtis) on CodePen.
Other solutions in the “crafty” territory might be: