不使用z-index实现Div重叠时的遮挡效果

要实现进度条与理想区域重叠时隐藏理想区域的效果，核心是解决静态定位元素无法使用z-index调整层级的问题，这里提供两种简单可行的方案：

方案一：给进度条添加相对定位与层级控制 #

静态定位（默认的position: static）元素不支持z-index，只需给进度条设置position: relative，就能让它拥有堆叠上下文，再配合z-index就能覆盖在理想区域上方。

修改你的代码，给进度条的className添加relative z-10即可，同时移除理想区域的w-full类（避免与自定义宽度冲突）：

import React, { useEffect, useState } from 'react';

type ProgressbarProps = {
  value: number,
  maxValue: number,
  percentageCap: number,
  idealZone: number
};

function Progressbar({ value, maxValue, percentageCap, idealZone }: ProgressbarProps) {
  const [displayedPercentage, setDisplayedPercentage] = useState(0);
  
  const idealZoneStart = 100 - idealZone/2;
  const idealZoneEnd = 100 + idealZone/2;

  useEffect(() => {
    const actualPercentage = (value / maxValue) * 100;
    setDisplayedPercentage(Math.min(percentageCap, actualPercentage)); 
  }, [value, maxValue]);

  const progressBarColor =
    displayedPercentage < idealZoneStart
      ? 'bg-orange-500'
      : displayedPercentage > idealZoneEnd
      ? 'bg-red-500'
      : 'bg-green-500';


  const progressBarStyle = {
    width: `${(displayedPercentage / percentageCap) * 100}%`,
  };

  const idealZoneStyle = {
    left: `${(idealZoneStart / percentageCap) * 100}%`,
    width: `${((idealZoneEnd - idealZoneStart) / percentageCap) * 100}%`, 
  };

  return (
    <div className="relative">
      {/* 添加relative z-10让进度条拥有堆叠上下文并覆盖理想区域 */}
      <div className={`h-4 rounded ${progressBarColor} relative z-10`} style={progressBarStyle}></div>
      <div className="absolute top-0 left-0 h-4 bg-gray-200" style={idealZoneStyle}></div>
    </div>
  );
}    

export default Progressbar;

方案二：调整DOM元素顺序 #

如果不想修改定位属性，也可以直接调整DOM顺序：把理想区域放在进度条前面。在同一堆叠上下文中，后面的元素会默认覆盖前面的元素（无特殊层级设置时）。

修改后的JSX部分：

return (
  <div className="relative">
    <div className="absolute top-0 left-0 h-4 bg-gray-200" style={idealZoneStyle}></div>
    <div className={`h-4 rounded ${progressBarColor}`} style={progressBarStyle}></div>
  </div>
);

原理说明 #

• CSS的z-index仅对非静态定位（relative/absolute/fixed/sticky）的元素生效，静态定位元素会忽略z-index属性，且始终处于堆叠上下文的底层。
• 给元素设置position: relative时，它会创建自己的堆叠上下文，此时z-index可以控制它与其他定位元素的层级关系。

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