如何在使用HashRouter的两个React组件间设置z-index

核心前提 #

z-index仅对设置了非static定位（position: relative/absolute/fixed/sticky）的元素生效，这是实现层级控制的基础。

具体实现步骤 #

1. 给路由组件添加定位属性

修改路由组件（比如Home和Cart）的样式，确保它们具备定位属性，才能让z-index生效：

// Home组件
const Home = () => {
  return (
    <div style={{
      position: 'relative',
      zIndex: 1,
      width: '100%',
      height: '100vh',
      background: 'lightblue'
    }}>
      Home Page
    </div>
  );
};

// Cart组件
const Cart = () => {
  return (
    <div style={{
      position: 'absolute', // 脱离文档流实现叠加效果
      top: 0,
      left: 0,
      zIndex: 10, // 层级高于Home组件
      width: '300px',
      height: '100vh',
      background: 'lightcoral'
    }}>
      Cart Page
    </div>
  );
};

2. 调整路由渲染逻辑（如需叠加显示）

如果希望切换路由时组件叠加显示（而非默认的替换渲染），需要同时渲染两个组件，通过路由状态控制层级与显示状态：

import { useLocation } from 'react-router-dom';

const Pages = () => {
  const location = useLocation();

  return (
    <div style={{ position: 'relative', width: '100%', height: '100vh' }}>
      {/* Home组件：根据路由切换层级 */}
      <div style={{
        position: 'relative',
        zIndex: location.pathname === '/cart' ? 1 : 10,
        width: '100%',
        height: '100vh',
        background: 'lightblue'
      }}>
        Home Page
      </div>
      {/* Cart组件：根据路由控制显示与层级 */}
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        zIndex: location.pathname === '/cart' ? 10 : 1,
        display: location.pathname === '/cart' ? 'block' : 'none',
        width: '300px',
        height: '100vh',
        background: 'lightcoral'
      }}>
        Cart Page
      </div>
    </div>
  );
};

3. 检查父容器限制

确保HashRouter的外层容器没有设置overflow: hidden或异常定位，避免限制子组件的层级展示。

关键注意点 #

• 若路由使用默认的替换式渲染（同一时间仅显示一个组件），z-index不会生效，因为组件不在同一渲染上下文
• 层级数值仅需保证相对大小，无需刻意使用超大数值

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