search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

oppacity-75 #439

Closed naschidaniel closed 4 years ago

naschidaniel commented 4 years ago

If the oppacity is set to 75%, a box will be displayed over all other elements. If the oppacity is set to 100% the box is behind all other elements (expected). The issue happens when i scroll on my page.

checkout the live perview www.milena-and-her-dog.com error_oppacity

thank you

adamwathan commented 4 years ago

This is just normal CSS behavior, opacity creates a stacking context so it sits above your header since your header has no z-index.

Give your header a z-index value higher than the z-index value of the cards (which are 0 by default) and it will be fixed 👍 Personally I'd probably use z-30 as my default for a header, so there are still z-40 and z-50 for things like modal dialogs and z-10 and z-20 for other z-index concerns in the main page area that should still always sit below the header.

naschidaniel commented 4 years ago

hi adamwathan,

thanks for the quick answer.

cheers