Überlappen Sie ein Div, ohne den Z-Index zu verwenden

Question

Ich bin auf ein Problem gestoßen, das ich anscheinend nicht lösen kann, und denke über etwas CSS-Magie nach, aber was ist der beste Ansatz für dieses Problem?

Ich habe eine Fortschrittsbalkenkomponente mit einem idealen Bereich und einem tatsächlichen Fortschrittsbalken. Wenn der Fortschrittsbalken den idealen Bereich überlappt, möchte ich den idealen Bereich ausblenden, als ob er einen kleineren Z-Wert hätte. Ich habe es versucht und festgestellt, dass Z-Index bei statisch positionierten Elementen nicht funktioniert. Wie kann ich dieses Verhalten reproduzieren? Hier ist der Code für die Komponente, die auch Rückenwind für das Styling nutzt.

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

Typ ProgressbarProps = {
  Wert: Zahl,
  maxValue: Zahl,
  ProzentsatzCap: Zahl,
  idealZone: Zahl
};

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

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

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


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

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

  zurückkehren (
    <div className="relative">
      <div className={`h-4 gerundet ${progressBarColor}`} style={progressBarStyle}></div>
    <div className="absolute top-0 left-0 w-full h-4 bg-gray-200" style={idealZoneStyle}></div>
    </div>
  );
}

Standard-Fortschrittsleiste exportieren;

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中的相邻兄弟选择器将在进度条重叠时隐藏理想区域。当条件不满足时，理想区域将按预期显示。