Z-index issues where I would not expect any

Hey all,

I use the ::after pseudo element on a text span, to style an underline. See here: https://dev.fynndesign.de (it’s below the word “entscheidend”)

However, the styled underline seems to sit even behind the slightly transparent background color of the spacing stack, which has the class .bg for that background.

So with the .underline::after having a z-index of -1 to sit below the text, it’s not working like expected. Hence it only shows a really pale yellow instead of the bright one that’s to be found in the hero image.

Any idea what I could do?

A negative value in z-index in going to put it lower than all of the inbuilt z-index values in Foundry. Z-index values are a tricky thing. This means your element that has a negative z-index value is going to be lower than everything else, including your background.

It just has a z-index of -1. And even if I use a much higher negative z-index on the background, or a much higher positive z-index on the text the underline is suppose to sit under, nothing changes.

Because a negative is always going to be under everything. X-indexes are a multi-faceted thing that is much more complex than you think. Additionally containing elements with a z-index set to them then also compartmentalizes all of the other elements within it, and those elements can have an entire set of relative z-index values separate from all of the elements outside of that containing element.

They’re pretty complex.

If you want to provide a simplified version of the problem, with just the items in question, then maybe someone can help out. That said, I don’t believe this to be a Blacksmith or Foundry problem.

Thanks for the reply, Adam. Probably that’s not a Foundry or Blacksmith issue then, but rather how everything behind the scenes is set up. What seems to be a rather simple issue and what works in e.g. Blocs very easily seems to be of a more difficult nature here.

Anyway, learned something new again.

Z-index works the same everywhere. It is a css property and not dependent on the app you’re using. As I said please share your example so we can assist you.

The example is linked in my original post :wink:

That’s a live url not a project file. To help with the way you’ve configured it we’d need to see that :wink:

So you have to assign a z-index to the underline class itself. This will compartmentalize the ::after pseudo class so that you can then apply a negative z-index to that ::after component. So give the underline class a z-index of say 2 and that’ll fix your problem. :wink:


Cheers Adam. A z-Index of 1 on the .underline class did the trick. Makes sense after reading the links concerning the z-index that you provided.

1 Like

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