如何实现antd Layout的Sider组件覆盖在Content组件上方

直接设置z-index失效的原因 #

Ant Design Layout组件默认使用flex流式布局，Sider作为flex子项默认占据常规文档流位置，仅调整z-index无法让元素脱离文档流，自然无法实现覆盖相邻Content的效果。

具体实现步骤 #

• 给Sider设置固定定位：通过Sider的style属性配置position: fixed，同时指定left: 0、top: 0、height: 100vh让侧边栏占满视口高度，配置zIndex: 100保证层级高于内容区。
• 适配内容区位置：如果需要Sider常驻占位，给包裹Content的Layout子项设置等于Sider宽度的marginLeft，同时加过渡动画适配Sider折叠/展开的宽度变化；如果要做抽屉式悬浮效果（Sider展开时完全覆盖内容、不推挤内容），不需要设置marginLeft。
• 层级冲突处理：如果页面存在固定Header、全局弹窗等元素，按需调整Sider的top偏移值和z-index数值，避免元素互相遮挡。

可直接复用的代码示例 #

import { Layout, Menu } from 'antd';
import { useState } from 'react';
const { Sider, Content, Header } = Layout;

export default function App() {
  const [collapsed, setCollapsed] = useState(false);
  // 对齐antd Sider默认宽度：展开200px，折叠80px
  const siderWidth = collapsed ? 80 : 200;

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={setCollapsed}
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
          top: 0,
          bottom: 0,
          zIndex: 100
        }}
      >
        <div style={{ height: 32, margin: 16, background: 'rgba(255,255,255,0.2)' }} />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={[
            { key: '1', label: '菜单项1' },
            { key: '2', label: '菜单项2' }
          ]}
        />
      </Sider>
      {/* 不需要Sider占位的话，直接去掉下面style里的marginLeft即可 */}
      <Layout style={{ marginLeft: siderWidth, transition: 'margin-left 0.2s' }}>
        <Header style={{ padding: 0, background: '#fff' }} />
        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
          页面内容区
        </Content>
      </Layout>
    </Layout>
  );
}

注意事项 #

• 不需要额外给Layout配置hasSider相关的自动适配属性，避免默认flex布局样式干扰固定定位效果。
• 如果需要做响应式适配（比如移动端自动变成抽屉覆盖模式、PC端常驻推挤内容），可以通过监听视口宽度动态切换内容区的marginLeft值即可。

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