OverlayScrollbars CSS breaks natural stacking order of elements

[mallison]

Describe the bug

If I replace an element with OverlayScrollbarsComponent then elements after it that would normally layer over the scrollable area are obscured by it.

Expected behavior
Replacing an element with OverlayScrollbarsComponent would not break the natural layering order of elements.

Examples
https://codesandbox.io/s/nice-dew-ymfx7?file=/src/App.js

You can see the text scrolls over the fixed header rather than under it as it does with OverlayScrollbarsComponent replaced with a plain div.

Environment

• Used Operating System(s): macOS 10.14.16
• Used Browser(s) (with version): Chrome 83.0.4103.116 Safari 13.1.1

Additional context
In the Chrome dev tools I disabled the z-index: 1 rules in OverlayScrollbars.css. It fixed the layering issue but I'm not sure if there are consequences. For now, I've added explicit z index rules to various components in my app to fix.

[KingSora]

Hey!

You're right, thanks for pointing that out. Really helpful!
As a workaround you can simply add this rule:

.os-host, 
.os-host-textarea {
  z-index: 0;
}

[KingSora]

Implemented in v1.13.0.