Link inside a link?

[Nic727]

Hi,

 

I know a link is not possible inside another link, but I'm trying to find a solution to this.

<div class="ex-story">',
    <a class="ex-story-link" rel="noopener noreferrer" target="_blank" href="website" title="Title">
          <div class="ex-story-img" style="background-image:url('url')">
                 <div class="ex-story-meta">
                          <div class="category">Travel</div> <!-- I WANT A LINK HERE -->
                          <div class="blog-name"><h1>TITLE<span class="blog-date">// March 10 2019</span></h1></div>
                          <div class="blog-description">subtitle</div>
                          <div class="blog-authorname">author</div>  
                 </div>
                 <div class="bg-filter"></div>
          </div>   
    </a> 
</div>

Here you can see how my block look like.

All my block is a link, so you can click anywhere to access the blog post. The problem is my "category" div. I want people to be able to click on the category name to show blog posts in the same category. But this div is inside a link, so I'm unable to make it work. Do you know how I can fixe that? Right now I have no idea how to make it possible to click on the category link.

 

Thank you

Edited March 10, 2019 by Nic727

[dsonesuk]

Place outer anchor with the other link as a sibling, the outer link will use position: absolute; and fill the whole container element which will have position: relative; to prevent the position: absolute extending beyond its boundary edges. Give the inner link a position relative and give it a z-index greater than the outer overlay link.

rough example:

https://www.w3schools.com/code/tryit.asp?filename=G1YL3PAFXBVF

Or more acceptable solution

https://www.w3schools.com/code/tryit.asp?filename=G1YL0GJVNIOG

They just need to at same sibling level, so one z-index will overlap the others.

Edited March 11, 2019 by dsonesuk