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

Dialog is positioned relative to the trigger now

); }; type Dialogs = 'abs' | 'fix'; export default function App() { const ref1 = useRef(null); const ref2 = useRef(null); const [showDialog, setShowDialog] = useState(); return (

Hello CodeSandbox

Click button to show the dialog on top

Nothing can escape Stacking Context rules. Red div has z-index:2, grey has z-index:1
Even fixed dialog will appear under the red div

grey
{showDialog === 'abs' && ( setShowDialog(undefined)} triggerRef={ref1} zIndex={9999} position="absolute" /> )} {showDialog === 'fix' && setShowDialog(undefined)} triggerRef={ref2} zIndex={9999} position="fixed" />}

red

); }

Chapter 13. Example 5