Unnecessary CSS stacking context (json shows in front of `position: xxx;` elements)

[Aprillion]

trafficstars

When rendering JSONTree on a page with absolute/fixed/sticky positioned elements, this will mess up the CSS stacking context, so some of the JSONTree elements that should have been part of the static content now appear in front of the absolute/fixed/sticky element like this:

reproduction

https://jsfiddle.net/Aprillion/8ohn09yx/

const App = () =>
  <div style={{height: '200vh'}}>
    <h1 style={{position: 'sticky', top: 0, background: 'yellow'}}>sticky header</h1>
    <div className="json">
      <JSONTree data={{a: {b: 0}}} />
    </div>
  </div>

workaround

.json * {
  position: static !important;
  transform: none !important;
}