import './styles.css'; import { useState, useRef, MutableRefObject, useLayoutEffect } from 'react'; import { Button } from './components/button'; const ModalDialog = ({ onClose, triggerRef, zIndex, }: { onClose: () => void; triggerRef: MutableRefObject; zIndex?: number; }) => { const [state, setState] = useState({ top: 0, left: 0 }); useLayoutEffect(() => { setState({ left: (triggerRef?.current?.offsetLeft || 0) - 10, top: (triggerRef?.current?.offsetTop || 0) + 10, }); }, [triggerRef]); return (

Dialog is positioned relative to the trigger now

); }; type Dialogs = 'grey1' | 'grey2' | 'red1' | 'red2'; export default function App() { const refGrey1 = useRef(null); const refRed1 = useRef(null); const [showDialog, setShowDialog] = useState(); return (

Hello CodeSandbox

Click button to show the dialog on top

<> All divs have overflow: hidden set. Red div also has position

grey
{showDialog === 'grey1' && setShowDialog(undefined)} triggerRef={refGrey1} zIndex={9999} />}

red
{showDialog === 'red1' && setShowDialog(undefined)} triggerRef={refRed1} zIndex={9999} />}

green

); }