Css – Overlaping a div without using z-index

I am not entirely sure if this will answer your questions. But try this:

1. CSS Selectors and Styling:

   Start by defining the necessary CSS selectors and styling rules. Assuming your component’s container has the class .progressbar-container, you can use the adjacent sibling (+) selector to target the ideal zone and apply styles to hide it when the progress bar overlaps:

   /* Using the adjacent sibling (+) selector to target the ideal zone */
   .progressbar-container .h-4 + .bg-gray-200 {
     display: none; /* Hide the ideal zone element */
   }
   
   /* You can also define a class to apply when the overlap condition is met */
   .overlap {
     /* Apply styles to show/hide the ideal zone as needed */
   }
   

2. Component Implementation:

   In your React component implementation, you can utilize the concept of the .overlap class to control the behavior of the ideal zone based on the overlapping condition:

   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;
   

By conditionally applying the .overlap class to the component’s container based on the overlap condition, the adjacent sibling selector in the CSS will hide the ideal zone when the progress bar overlaps it. When the condition is not met, the ideal zone will be displayed as intended.