我有一个我猜是一个相当常见的设置在NextJS 13/14应用程序路由.我有一个layout.tsx文件，它在屏幕顶部显示了我的粘性导航栏，用于导航目的:
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<div className="relative">
<!-- My navbar is here -->
<div className="sticky top-0 z-50 h-16 w-full bg-blue-200" />;
<div className="px-4">
<div className="flex-grow p-6 md:overflow-y-auto ">{children}</div>
</div>
</div>
</body>
</html>
);
}
然后我创建了我的page.tsx文件，其中包含一个模式:
import Modal from "./Modal";
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-4">
<div className="mx-auto">
<p>Hello world!</p>
<div className="w-full h-full">
<Modal />
</div>
</div>
</main>
);
}
以下是Modal Code:
"use client";
import { Dialog, Transition } from "@headlessui/react";
import { Fragment, useState } from "react";
export default function Modal() {
const [isOpen, setIsOpen] = useState(false);
function toggleOpen() {
setIsOpen(!isOpen);
}
return (
<>
<button
className=" border-2 rounded-lg border-gray-400"
onClick={toggleOpen}
>
Open me!
</button>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={toggleOpen}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black/25" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Dialog.Panel className="text-center w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 align-middle shadow-xl transition-all">
<Dialog.Title
as="h3"
className={`text-black text-lg font-medium leading-6`}
>
{"This is a header"}
</Dialog.Title>
<div className="flex mt-4 text-center w-full justify-center">
<div className="ml-3">
<button className="rounded-md" onClick={toggleOpen}>
Close modal
</button>
</div>
</div>
</Dialog.Panel>
</div>
</div>
</Dialog>
</Transition>
</>
);
}
这给了我们这样的东西:
当我打开模态的时候，一些更丑的东西:
My issue is that when I open the dialog, the modal transition does NOT obscure layout.tsx (e.g. the blue header), but it obscures the rest of the page not defined by the layout component (e.g. the children of the layout). I know this is because of the way that Nextjs nests components: 
因此，我想我的问题是，任何全屏覆盖都没有超过layout.tsx中的代码的顶部，这难道不是使用layout.tsx用于任何类型的导航/永久fixture 目的的严重缺点吗？如果布局总是坐在任何模态覆盖的顶部，那不总是只是非常丑陋，无论如何？