React native position absolute not on top

Question

I have the code seen here in this snack https://snack.expo.dev/@ftoldghost/card-design

I'm trying to get the blue circle to be on top of that green card element. The absolute position is working to place it in the right spot, but it's ending up underneath instead of on top.

What am I doing wrong?

Answer 1

I found the issue. The element I was trying to place over had an elevation value. The z-index didn't seem to want to compete with that. Once I changed the elevation on the circle to the same value as the elevation on the other, it behaved how you'd expect.