Superposer un div sans utiliser z-index

Question

J'ai rencontré un problème que je n'arrive pas à résoudre et je pense à un peu de magie CSS, mais quelle est la meilleure approche pour ce problème ?

J'ai un composant de barre de progression qui possède une zone idéale et une barre de progression réelle. Lorsque la barre de progression chevauche la zone idéale, je souhaite masquer la zone idéale comme si elle avait une valeur z plus petite. J'ai essayé cela et j'ai découvert que z-index ne fonctionne pas sur des éléments positionnés statiquement, comment puis-je reproduire ce comportement ? Voici le code du composant, qui utilise également tailwind pour le style.

importer React, { useEffect, useState } depuis 'react';

tapez ProgressbarProps = {
  valeur : nombre,
  valeurmax : nombre,
  pourcentageCap : nombre,
  zoneidéale : numéro
} ;

function Progressbar ({ valeur, maxValue, pourcentageCap, idealZone } : ProgressbarProps) {
  const [displayedPercentage, setDisplayedPercentage] = useState(0);
  
  const idéalZoneStart = 100 - idéalZone/2 ;
  const idéalZoneEnd = 100 + idéalZone/2 ;

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

  const progressBarColor =
    affichéPourcentage <idéalZoneStart
      ? 'bg-orange-500'
      : pourcentage affiché > idéalZoneEnd
      ? 'bg-rouge-500'
      : 'bg-vert-500';


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

  const idéalZoneStyle = {
    à gauche : `${(idealZoneStart / pourcentageCap) * 100}%`,
    largeur : `${((idealZoneEnd - idealZoneStart) / pourcentageCap) * 100}%`,
  } ;

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

exporter la barre de progression par défaut ;

Answer 1

Je ne sais pas si cela répond à votre question, mais essayez ceci :

1. Sélecteurs et styles CSS :

   Commencez par définir les sélecteurs CSS et les règles de style nécessaires. En supposant que votre conteneur de composants porte le nom de la classe .progressbar-container，你可以使用相邻兄弟选择器（+) pour positionner la zone idéale et appliquer un style pour la masquer afin d'éviter que les barres de progression ne se chevauchent :

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

2. Implémentation des composants :

   Dans l'implémentation de votre composant React, vous pouvez utiliser le concept de .overlapclasses pour contrôler le comportement des zones idéales et juger en fonction de conditions qui se chevauchent :

   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;

En appliquant conditionnellement .overlap classes sur les conteneurs de composants en fonction des conditions de chevauchement, les sélecteurs frères adjacents en CSS masqueront la zone souhaitée lorsque les barres de progression se chevauchent. Lorsque les conditions ne sont pas remplies, la zone idéale s'affichera comme prévu.