Absolutely positioned link being covered by padding

My issue is that my “like” heart link is being covered by padding from the container which is used to push the category item to the right enough to display the heart so that they don’t overlap. In my example above, it’s a little different than my real code. My real code is using an image for the heart (I’m duplicating this technique for the like: https://codepen.io/mindstorm/pen/aZZvKq) but I couldn’t include it in the fiddle because I’ve resized the heart so that it works in my design and I didn’t know how to include it in the fiddle. That said, the final heart image is 50px by 50px and the only way I knew to position it was absolutely in order to line it up with the other content. Given that it’s absolutely positioned, I can’t click it because of the padding from the card-footer-left which pushes over the category.

What’s the best approach to resolving this issue?


I’m on a phone at the moment so can’t check your code but it sounds like a straight forward z-index issue to me.

Have you tried raising the z-index on the heart image?

1 Like

That was my first thought as well, but adding z-index: 999; to the heart image doesn’t have any effect.

I kept seeing solutions online of z-index: -1; applied to the absolutely positioned item, but that didn’t work either. That simply makes the heart image disappear completely

I checked your JsFiddle and Codepen a while ago but I couldn’t see the issue. The blue heart is showing and it is linking too.


Why is it AP? If I remove that it lines up with the category link better still.
Now if the image was 50px it would still line up if the links have vertical-align middle if I ubderstand the problem. :slight_smile:
Have you tried that?

Without the AP:


Just had a look on a computer and the link is working if you right click and open in a new tab. I don’t use jsfiddle but it looks like external links are not working.(codepen is much better :slight_smile: )

1 Like

If you click the heart in the JsFiddle, you should see that it doesn’t actually go anywhere. It’s linked, but does nothing. Or at least on my end it doesn’t.

Sorry, I knew this would be a tough one to put into words. So the heart itself isn’t 50px in height or width, BUT it has to be a 50px by 50px image to accommodate of the explosion effect that happens once clicked. Given that it’s 50px tall and the area that it’s located (in that sort of info section of the post next to the category), 50px is too tall for it to work in that area. So with absolute positioning, I take it out of the regular flow of the document and then position it where it fits so that the height doesn’t affect how tall the container surrounding it is. Hope that clears things up a bit. Thanks

1 Like


Just tried the jsfiddle link and was sent to ?


1 Like

It does, thank you!

How is the Jsfiddle showing the issue, or is it not showing without the exploding implemented?

Is the Codepen showing the issue?

Please tell. I want to understand/see the problem. :slight_smile:

1 Like

The heart link in the fiddle does not navigate when clicked (I’ve tested chrome and Firefox PC & Mac). The link will work if you right click and open in a new tab or window. That seems to be the default for jsfiddle and you would need target=“_blank” to action a link.

However I assume this has nothing to do with the original problem unless the original code was in jsfiddle also. :slight_smile:

I’m offline now until tomorrow afternoon so I will leave you in Erik’s capable hands :wink:


I used PaleMoon, a Firefox fork that goes its own way. :smile:

My Firefox block the outgoing link in the Jsfiddle, and so does Chromium and Brave, but that has nothing to do with the code. I think it’s the new browser shields.

But I haven’t yet seen the issue? :wink:

I’ll try another browser then. :thinking:


Ugh… well this is embarrassing :grimacing:

Turns out that it was a jQuery issue that I mistook for a CSS issue. I had a similar CSS issue as this previously and was certain it was that. jQuery never entered my train of thought. Then, when I created the Fiddle and it seemed to have to same behavior, it only reassured me of the problem but instead, it turns out not being able to click links in Fiddle seems to be default.

I have it fixed now and sincerely apologize for sending you both on a wild goose chase!


Easily happens when you use those framework, especially when the platform you try to show the issue in doesn’t always show all the uncompiled css/javascropt correctly.

Thank you for telling. :+1:

[Off topic]

I didn’t liked Codepen from start because the automatic update of the code review, but since I discovered you nowadays can turn off the update I too have started using it. Wish all codepens were set to not auto update by platform default (authors can always change their defaults).

Jsfiddle has evolved too, like I no longer create updates by mistake when using the run shortcut. :smile:

[/Off topic]


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.