在不使用z-index的情况下重叠一个div

Question

我遇到了一个问题，我似乎无法解决，我在考虑一些CSS魔法，但是对于这个问题，最好的方法是什么呢？

我有一个进度条组件，它有一个理想区域和实际进度条。当进度条与理想区域重叠时，我想隐藏理想区域，就像它的z值较小一样。我尝试过了，发现z-index在静态定位的元素上不起作用，我该如何复制这种行为？这是组件的代码，它还使用tailwind进行样式设置。

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">
      <div className={`h-4 rounded ${progressBarColor}`} style={progressBarStyle}></div>
    <div className="absolute top-0 left-0 w-full h-4 bg-gray-200" style={idealZoneStyle}></div>
    </div>
  );
}    

export default Progressbar;

Answer 1

我不确定这是否能解答你的问题，但可以试试这个：

1. CSS选择器和样式：

   首先定义必要的CSS选择器和样式规则。假设你的组件容器具有类名.progressbar-container，你可以使用相邻兄弟选择器（+）来定位理想区域，并应用样式来隐藏它，以防止进度条重叠：

   /* 使用相邻兄弟选择器（+）定位理想区域 */
   .progressbar-container .h-4 + .bg-gray-200 {
     display: none; /* 隐藏理想区域元素 */
   }
   
   /* 你也可以定义一个类，在满足重叠条件时应用该类 */
   .overlap {
     /* 根据需要应用显示/隐藏理想区域的样式 */
   }
   

2. 组件实现：

   在你的React组件实现中，你可以利用.overlap类的概念来控制理想区域的行为，根据重叠条件进行判断：

   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}%`,
     };
   
     return (
       <div className={`relative ${displayedPercentage >= idealZoneStart && displayedPercentage <= idealZoneEnd ? 'overlap' : ''}`}>
         <div className={`h-4 rounded ${progressBarColor}`} style={progressBarStyle}></div>
         <div className="absolute top-0 left-0 w-full h-4 bg-gray-200"></div>
       </div>
     );
   }
   
   export default Progressbar;

通过根据重叠条件在组件容器上有条件地应用.overlap类，CSS中的相邻兄弟选择器将在进度条重叠时隐藏理想区域。当条件不满足时，理想区域将按预期显示。