Reveal component interfering with positioned overlay

[henit]

Hi, I have experienced this when using React Reveal in an application, and recreated the case with similar css in this jsfiddle.

What happens: I have a react component that is wrapped with a <Fade>. In the example represented by the "#reveal" div which has similar css to what a Fade sets. Inside that div, there is a dropdown that consists of an element that is position: relative, and a content box that is absolute positioned (#dropdown-content in the example). Below the Fade, there is a div that is set to position: relative for other reasons (#positioned in the example).

Workarounds: This positioned element appear (at least in Chrome 74 on my macOS) above the dropdown inside the reveal-element, while the paragraph between the two is not above it. If I disable the animation set on the reveal-element, it does not appear above anymore. If I wrap the reveal-element in another div that is position: relative, the positioned element does not appear above the dropdown either.

Desired solution: But I would like to be able to use Reveal-components together with other positioned DOM elements without having to wrap the Reveals in relative-positioned divs all the time... Any suggestions?