auto-animate icon indicating copy to clipboard operation
auto-animate copied to clipboard

useRef element results in z-index issue's.

Open is-it-ayush opened this issue 3 years ago • 1 comments

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:

image

Expected Behaviour:

image

is-it-ayush avatar Sep 09 '22 20:09 is-it-ayush

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.

MarlonX19 avatar Apr 16 '24 15:04 MarlonX19