transform class is increasing the z-index of a div

[neel1996]

When transform property is set for a div, it is increasing the z-index of the element and placing it on top of a backdrop

Manually setting the z-index value of the backdrop (to z-40) is resolving the issue

[wadefletch]

Could you give a small example of the HTML and CSS that reproduce this behavior?

[neel1996]

sorry, my bad. It is actually the transform property which is causing the overlay issue.

<div className="fixed w-full h-full top-0 left-0 right-0 flex overflow-auto">
    //this is the backdrop element which will be displayed based on a state transition in my react app
</div>

The above element being set as fixed, gets displayed on top of all the other elements when an event is triggered. This works perfectly with no issues. But when I set the transform property to an element, then that particular element takes priority in the z-index stack and gets displayed on top of the backdrop affecting the whole UI.

<div className="text-gray-700 border-b-2 border-dashed cursor-pointer justify-center p-3 rounded flex gap-4 text-xl transform">
    //this is the button which gets painted on top of the backdrop when transform property is set to the div
</div>

Sample screenshots by keeping and removing the transform property from the div has been attached above.

For reference, the complete JS component with the styling applied can be found here - https://github.com/neel1996/gitconvex-ui/blob/82d84fc19561c47769619ea68654da9a5e905706/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/FileExplorerComponent.js

[adamwathan]

This happens even if you aren't using Tailwind, just how CSS works:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

You need to work around it by explicitly assigning a position other than static and a z-index to the things that are layering unexpectedly.