How to determine (and fix) z-index of an anchor tag within a custom module?

Question

I have adapted Webtiki's Responsive hexagon grid into a custom html module, however something is messing with the stacking of the anchor tag.

When I added the html to my joomla site, the link seems to be pushed down below the div's for the h1 and the paragraph which make the link un-clickable when you hover of the list item. The mouse indicates that the image remains a link before the two divs move in with the hover effect. If I change the z-index of the anchor tag, then the hover effect on the list item doesn't work, so I'm not sure how to go about fixing this.

Here's a test server with the code in question Test-Server

So, my question is why is the z-index for the anchor tag changed when it's incorporated into the site? (I realize that many things can affect the positioning of an element, especially with the multiple nested divs within the html generated by a CMS like joomla). Next, what can I do to diagnose or "fix" the z-axis positioning so that the link and the hover-effect both work? I've tried using the mozilla web developer tool bar to display stacking elements, but it doesn't show anything regarding the divs in question.

Answer 1

Ok, I see what you mean now. So there is no way to achieve this with your current HTML markup. Simply because if you change the z-index of the <a> element, the image will overlap the <h1> and <p>.

If you look at the demo, you can see that all the content is wrapped inside the <a>.

Your current markup:

<div>
    <a href="#">
        <img src="/greentec-capital.com/images/gallery/bild4.jpg">
    </a>
    <h1>Title</h1>
    <p>Some text here</p>
</div>

Required markup:

<div>
    <a href="#">
        <img src="/greentec-capital.com/images/gallery/bild4.jpg">
        <h1>Title</h1>
        <p>Some text here</p>
    </a>
</div>