useRef element results in z-index issue's.

[is-it-ayush]

Problem

I have a component that slides from left to right over on top of a list. Everything works fine without auto-animate. As soon as ref={parent} is added to the list to make it lively (with auto-animate). The list somehow goes on top of that component making that component practically un-useable. How should I got about fixing this. I am using tailwind but the z-index property does not seem to work if i use auto-animate.

Current Behaviour:

Expected Behaviour:

[MarlonX19]

I had the same issue just yesterday when I had a similar scenario. The thing is not related to z-index apparently, instead it's related to the position relative that the div will receive when using the ref={parent}, at least that's what I found out after inspecting the code, take a look throught the dev tools and you'll probably see that there's an inline position relative added to the parent div!

I wonder oif maybe there's a reason for that?!

workaround: I added a position: static !important to the div's styles and it solved the issue for now.

I've been busy with the back log of tasks but I might want to look deeper into this issue and maybe solve it.