CODEWITHSUNDEEP
htmlcssoverlayz-indextailwind-css
kurupt_89
kurupt_89

Reputation: 1592

Modal overlay appearing over fixed div

I'm using Tailwind CSS and I have this problem with some CSS where a modal overlay that is a button does not appear over the top of other elements that are set as fixed.

The below link is the code and here is the preview of the issue.

https://codesandbox.io/s/tailwind-css-vre8j

The div's border and tag backgrounds are above the overlay

I've tried to set the z-index of both the overlay and container of problem div but it ignores it.

The example here is a stripped-down version of the actual page. Removed them as much irrelevant stuff as I could to show the problem.

Upvotes: 0

Views: 6561

Answers (1)

Leo Melin
Leo Melin

Reputation: 234

You have to have z-index on overlay to be greater than on other elements. https://codesandbox.io/s/tailwind-css-hdx75

Here you can see that I've used z-10 for "billy bob junior box" and z-20 for the overlay and its wrapper

Upvotes: 1

Related Questions