ReactJS -- Overlay Button Not Clickable When Placed Above A List

Please see the Code Example in Code Sandbox I have created I want the button action of the Floating Button to fire. But instead the Action assigned to the ListItem is triggered.

Solution 1:

It's more a markup/styling issue than a js problem. The easiest thing you can do is set a z-index on the overflow container.

const overlay = {
    position: 'absolute',
    bottom: 30,
    right: 10,
    zIndex: 100
}

This makes your example working, but maybe there are better markup solutions to solve your problem.