#Having trouble with z-index and pseudo element

8 messages · Page 1 of 1 (latest)

nocturne dust
#

Hi ! Having a bit of a odd one with z-index and pseudo element. I'm trying to put a pseudo element in z-index -1, relative to an h3 in z-index 2 behind a li in z-index 3, but the pseudo element always end up on top of my li element despite its z-index being higher.

You may find the css here (my problem occurs at line 350) https://github.com/LuxSolace/landing-page-hockey/blob/main/style.css and the html here https://github.com/LuxSolace/landing-page-hockey/blob/main/index.html (with the element at line 173).

I read online that putting the element with a pseudo element inside a parent container can fix the problem, but it didn't work here. If it's the fact that the blob is inside a pseudo element, I can change it, but I just wondered if somehow this HTML configuration could work, and if so, where did I go wrong ?

z-index.PNG
dusky sage
#

Hello Lux - are you able to import the code into a scrim? This will make it easier for people to take a look and hopefully help out vallymcvalentine

nocturne dust
royal mist
#

I seem to've fixed it by adding a --value to top. But was this the issue you had?

.footer--informations h3::before {
    content: url(./images/footer-blob-2.svg);
    top: -20px;
}
Schermafbeelding_2022-10-13_om_12.53.39.png
nocturne dust
#

No, my issue is with the z-index, but thanks for trying ! Without moving the blob a little bit to the top, the li ("Mentions légales" "Politique des données") should appear on top of the blob, instead of being hidden behind it. I believe it's something you can do with z-index but even here, with the z-index of the li being higher than the H3 and its blob, it doesn't work. This is my issue. How do I move the li on top of the blob ? In the foreground, in a sense, instead of the background.

royal mist
# 
.footer--informations li {
    z-index: 4;
    position: relative;
}
nocturne dust
#

oh ! i'm very glad it's working, but I cannot fanthom why the position : relative made it work ?

royal mist
#

I think it has to do with li being a child from ul. By adding the position: relative you sort of unlock if from its parent? Well, that was the reasoning I used for the solution.