Spectrum is now read-only. Learn more about the decision in our official announcement.


Hey Everybody! Come share Pens, ask front-end coding questions, and get/give feedback with your CodePen pals


Thought excercise: "nested" links.

August 31, 2018 at 3:45pm
The CodePen community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Thought excercise: "nested" links.

August 31, 2018 at 3:45pm
Say you have a BIG link. A whole area that you can click to go somewhere. But within that area is another link that goes somewhere different.
What are your option there? How might you do it?

August 31, 2018 at 3:59pm
Two absolutely positioned links, inside a position: relative parent, with generous padding-bottom on the first link, with the second link "pinned" in front via bottom:0 (or whatever offset).
inner link with `position: relative;z-index: 1;`?
I wrap the "different link" inside an <object> tag, so you have <a class="big-link" href="big.html">I'm a big link <object><a class="small-link" href="diff.html">I'm an inside different link</a></object></a>
this is a regular requirement where I work and I normally position things and use z-index.
Say we have an image background on a div with a I would set the div with the background to have a placeholder blank image inside the markup and style so the background image covers it and wrap the img element inside an a tag with a z-index of 0 then inside the same div have another text link and position that and give a z-index of 1...
The below is a quicky so might have issues...
body {
position: relative;
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background: url(http: // no-repeat;
background-size: contain;
div:first-of-type img {
height: 100%;
width: 100%;
div a:last-of-type {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
<a href="background-link">
alt="alt here">
<a href="text-link">Text link</a>
would you also have to stop event propogation? 🤔
Structurally, one link shouldn't live inside another (from a markup perspective). I'd have a container with the two links in and and just position them accordingly. This pattern is something of a regular occurrence in our projects.
This is confusing from a UX perspective IMO - making a big area clickable vs jsut the text. Nothing visually indicates clickability.
Here's a working example. Though, I agree with others on this thread that it's confusing UX…
I would create an absolute positioned link (z-index 1) that covers the whole container (big link) and a regular link (z-index 2). It could make sense from a UX perspective, for example a product catalog with two buttons: Show details and Add to cart, and the complete container also linking to Show details
I made a smaller example, 1st link goes to codepen, 2nd to Twitter.

September 7, 2018 at 2:33pm
I definitely agree this is an inherently bad idea, but if I had to do it I'd add some unclickable space around the nested link to help with slightly inaccurate clicks/taps. A hasty example built starting from 's version:
(oops, sorry for accidentally bumping this apparently very old thread, I just found my way here for the first time following a link here: