Thought excercise: "nested" links.

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

<style>
  body {
    position: relative;
  }

  div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: url(http: //placehold.it/600x600&text=background-image-600px-square) 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%);
  }
</style>

<div>
  <a href="background-link">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
      alt="alt here">
  </a>
  <a href="text-link">Text link</a>


</div>

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… https://codepen.io/nathansmith/pen/vzgvwQ

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. https://codepen.io/seancurtis/pen/yxgdeE?editors=0100

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 @nathansmith's version: https://codepen.io/cbirdsong/pen/ZMaLPK

(oops, sorry for accidentally bumping this apparently very old thread, I just found my way here for the first time following a link here: https://www.sarasoueidan.com/blog/nested-links/)