z-index issue

[sushilronghe99]

Bug

Problem Report

When the drag handle is set on the edge of the div; the drag handle gets overlapped by the first div. It does not take into account the z-index.
Example.

<div style={{minHeight:300,width:300}}>
                <div style={{backgroundColor:"green",minHeight:150}}></div>
                <div  style={{backgroundColor:"red",minHeight:150,position:'relative'}}>
                <Resizable position={'relative'} height={height} width={width} onResize={onResize} resizeHandles={['n']} >
                    
               </Resizable>
                </div>
            </div>

In this case the drag handle icon overlapping Green color div won't be visible. Even if we add a z-Index to the higher than the green color div the drag handle is not visible.

System Info

Node Version: v.16.14.2
Browser: Chrome
OS: Mac

Reproduction

Have not setup the sandbox but let me know if it is required.