Issue with Z-index

[CodingCactus]

Question: Z-index issues


Repl link: https://demandingmobileblogclient.codingcactus.repl.co/

Vocab:

• Flash message: The long green bit saying “Chat successfully created”
• System messages: The small green rounded rectangles saying “Chat created 10:41”, and “[name] was added 10:41”

I’ve taken a page from the actual website and put the specific situation I am having trouble with into a repl, so you don’t need to follow any reproduction steps, you can just play around with it on the linked website.

The problem is, the flash message gets covered by the system messages however I want it to be the other way around (the flash message covering the system messages). I’ve tried messing around with z-index on multiple elements, but it would appear that the flash message being flex is messing with the z-index.

You can see the problem here if its not explained well:

Setting the flash message as not positioned absolute, and instead making it push down the content of the chat is a workaround, however not the solution i am looking for.

[CodingCactus]

Interesting observation, is that it works correctly when the flash message text moves onto 2 lines. Not too sure how to use this information yet tho.

[CodingCactus]

Turns out there is actually no problem, it’s just that it looks like it is on top of the flash message, because the outline of the flash is the same colour as the background of the system messages, and the transparent overlay barely effects the colour of the system message. Oops!