React布局：不使用z-index实现Header及侧边栏粘性且内容不重叠

问题核心是当前DOM顺序导致后续容器堆叠层级高于Header，结合CSS Grid布局可以从结构上解决元素重叠问题，同时实现Header、侧边栏的粘性效果，无需依赖z-index。

调整布局结构（核心修改） #

使用CSS Grid明确划分页面区域，让Header、侧边栏和主内容区处于天然的层级关系中，滚动仅限制在主内容区域：

1. 重构Layout组件 #

import { FC, PropsWithChildren } from "react";
import Header from "../header/header";
import LeftSidebar from "../left-sidebar/left-sidebar";
import RightSidebar from "../right-sidebar/right-sidebar";

const Layout: FC<PropsWithChildren> = ({ children }) => {
  return (
    <div style={{
      display: "grid",
      gridTemplateAreas: `
        "header header header"
        "left main right"
      `,
      gridTemplateRows: "60px 1fr",
      gridTemplateColumns: "1fr 5fr 1fr",
      minHeight: "100vh"
    }}>
      <Header style={{ gridArea: "header" }} />
      <LeftSidebar style={{ gridArea: "left" }} />
      <div style={{ gridArea: "main", overflowY: "auto" }}>
        {children}
      </div>
      <RightSidebar style={{ gridArea: "right" }} />
    </div>
  );
};

export default Layout;

2. 简化Header组件（移除sticky） #

Grid布局中Header固定占据顶部行，自然保持在视口顶部：

const Header = () => {
  return (
    <div
      style={{
        height: "60px",
        backgroundColor: "rgb(12, 4, 244)",
        color: "white",
        display: "flex",
        gap: "15px",
        alignItems: "center",
        padding: "0 15px"
      }}
    >
      <a href="#" style={{ color: "white", textDecoration: "none" }}>Home</a>
      <a href="#" style={{ color: "white", textDecoration: "none" }}>Contact</a>
      <a href="#" style={{ color: "white", textDecoration: "none" }}>Service</a>
      <a href="#" style={{ color: "white", textDecoration: "none" }}>Settings</a>
      <a href="#" style={{ color: "white", textDecoration: "none" }}>About</a>
    </div>
  );
};

export default Header;

3. 简化侧边栏组件（移除sticky） #

侧边栏占据Grid的左右列，高度自动填充剩余空间，自然保持在视口内：

// LeftSidebar
const LeftSidebar = () => {
  return (
    <div
      style={{
        backgroundColor: "green",
        padding: "15px",
        color: "#fff"
      }}
    >
      LeftSidebar
    </div>
  );
};

export default LeftSidebar;

// RightSidebar
const RightSidebar = () => {
  return (
    <div
      style={{
        backgroundColor: "yellow",
        padding: "15px"
      }}
    >
      RightSidebar
    </div>
  );
};

export default RightSidebar;

4. 调整Home组件（移除内部滚动） #

滚动由Layout的主内容区负责，仅保留内部sticky元素的定位：

const Home = () => {
  return (
    <div style={{ padding: "15px" }}>
      {"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae".repeat(100)}
      <div
        style={{
          position: "sticky",
          top: "60px", // 避开Header高度
          backgroundColor: "#fff",
          padding: "10px",
          boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
        }}
      >
        <h1>Fix this issue without using Z-index</h1>
      </div>
      {"Hello everyone, I’m looking for the best idea to resolve the problem related to the superposition of elements without using z-index.".repeat(1000)}
    </div>
  );
};

export default Home;

方案优势 #

• 完全无需z-index，通过Grid布局的结构层级天然隔离元素
• 滚动范围精准限制在主内容区，Header和侧边栏始终固定在视口对应位置
• 布局结构清晰，无需计算复杂的偏移量，维护成本低

内容的提问来源于stack exchange，提问作者testing