在不使用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中的相鄰兄弟選擇器將在進度條重疊時隱藏理想區域。當條件不滿足時，理想區域將如預期顯示。