0

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.

kurupt_89
  • 1,542
  • 8
  • 37
  • 65

1 Answers1

1

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

Leo Melin
  • 234
  • 2
  • 6
  • ah! that's what I was doing wrong, I had tried similar to what you did, I just never added one to the top-level fixed div. Thanks! – kurupt_89 Dec 16 '19 at 09:26