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) + 30, }); }, [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 refGrey2 = useRef(null); const refRed2 = useRef(null); const [showDialog, setShowDialog] = useState(); return (

Hello CodeSandbox

Click button to show the dialog on top

Grey div triggered its own stacking context. And its underneath the red div.

The dialog has z-index 9999, but it doesn't matter. It's scoped to the grey div, so it will appear under the red one

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

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

green

New stacking context is triggered by "transform" CSS property

The dialog inside the grey div will appear "underneath" the red div because of it

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

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

green

); }