z-index?

[ArutanSipdrae]

Hello, I'm coding using the ReactJS library. I've created small components that can be used anywhere, and upon clicking one it would open a modal on top of everything for data display, edit, delete, etc. For that I have created a modal component that is fixed and have a high z-index to be displayed above everything. My issue occurred when I started using simplebar (to get the same scrollbars across browsers), there's a div in the SimpleBar component that has a z-index of 0, and my small components being all the way to the bottom are restricted by that z-index, which means the modal component they use as well. Is there a way to remove this z-index or would it break everything?

EDIT: I overrode the simplebar-mask class z-index with a z-index: auto, it didn't break anything and my modals are now working correctly. I'm not really sure what was this z-index here for

[gitcatrat]

Can't answer your question about z-index: 0 but here's how I do modal without having to change core CSS:

<div className="modal"> {/* this has z-index: 1; */}
  <Scrollbar>
     <div className="background"> {/* "dark background" - height: auto; min-height: 100vh; */}
       <ModalWindow /> {/* actual modal window and content, centered with flex CSS on "background" */}
     </div>
  </Scrollbar>
</div>

[ArutanSipdrae]

Oh so you're basically wrapping the simplebar in a higher z-index so that it becomes the new z-index limit for the childs ... I'm not particularly fond of making a div just for that but I suppose that works, I'll probably just keep my z-index auto overwrite method as long as nothing break, this feels more clean

[gitcatrat]

How are you positioning modal then? position: fixed; directly on scroll root? That's the main reason for my div.

It's definitely cleaner but you can be pretty sure that future simplebar versions work out of the box with wrapping div. That could not be the case if you overwrite core styles or add conflicting styles, etc. I've used simplebar for few years and there has been several quite big changes to how it works.

[Grsmto]

SimpleBar is using absolutely positionned elements so it creates a new stacking context. I think @gitcatrat solution is great!

[ArutanSipdrae]

Hmmm I see, I suppose I could do it then. Thanks for the advice