我希望能够将面包屑元素固定在子组件页面的顶部。

我的布局在这里：

const style = {
  container: `h-screen overflow-hidden relative`,
  mainContainer: `bg-gray-800 flex flex-col h-screen pl-0 w-full]`,
  main: `bg-gray-400 h-screen overflow-auto pb-36  md:pb-8  lg:rounded-tl-3xl`,
};

export default function DefaultLayout({ children }: { children: ReactNode }) {
  return (
    <DashboardProvider>
      <div className={style.container}>
        <div className="flex items-start">
          <Overlay />
          <SideNavigation mobilePosition="left" />
          <div className={style.mainContainer}>
            <TopNavigation />
            <main className={style.main}>{children}</main>
          </div>
        </div>
      </div>
    </DefaultProvider>
  );
}

应用程序上的每个页面都位于标题下方和侧边导航右侧的该区域内。

我希望能够在我的子组件（内部子组件的顶部，位于整体导航标题下方）顶部有一个固定的面包屑元素：

const ItemDetail = (props: ItemDetailProps) => {
  return (
    <div className="flex-1 flex items-stretch overflow-hidden">
      <main className="flex-1 overflow-y-auto">
        <nav
          className="bg-white border-b border-gray-200 flex"
          aria-label="Breadcrumb"
        >
          <ol
            role="list"
            className="max-w-screen-xl w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8"
          >
            <li className="flex">
              <div className="flex items-center">
                <a href="#" className="text-gray-400 hover:text-gray-500">
                  <HomeIcon
                    className="flex-shrink-0 h-5 w-5"
                    aria-hidden="true"
                  />
                  <span className="sr-only">Home</span>
                </a>
              </div>
            </li>
            {pages.map((page) => (
              <li key={page.name} className="flex">
                <div className="flex items-center">
                  <svg
                    className="flex-shrink-0 w-6 h-full text-gray-200"
                    viewBox="0 0 24 44"
                    preserveAspectRatio="none"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                    aria-hidden="true"
                  >
                    <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
                  </svg>
                  <a
                    href={page.href}
                    className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                    aria-current={page.current ? "page" : undefined}
                  >
                    {page.name}
                  </a>
                </div>
              </li>
            ))}
          </ol>
        </nav>
</div>
</div>

问题是我无法修复它。我认为这是因为一个子组件。我希望它修复，所以当我向下滚动子组件时，面包屑将保持在顶部。

我知道标题导航条的高度，所以我也尝试了固定的 top-20，但这也不起作用。