在不使用z-index的情況下重疊一個div

Question

我遇到了一個問題，我似乎無法解決，我在考慮一些CSS魔法，但是對於這個問題，最好的方法是什麼？我有一個進度條組件，它有一個理想區域和實際進度條。當進度條與理想區域重疊時，我想隱藏理想區域，就像它的z值較小一樣。我嘗試過了，發現z-index在靜態定位的元素上不起作用，我該如何複製這種行為？這是元件的程式碼，它還使用tailwind進行樣式設定。 importReact,{useEffect,useS

P粉619896145 · Answer

我不確定這是否能解答你的問題，但可以試試這個：

CSS選擇器與樣式：

先定義必要的CSS選擇器和樣式規則。假設你的元件容器具有類別名稱.progressbar-container，你可以使用相鄰兄弟選擇器（）來定位理想區域，並應用樣式來隱藏它，以防止進度條重疊：

/* 使用相邻兄弟选择器（+）定位理想区域 */
.progressbar-container .h-4 + .bg-gray-200 {
  display: none; /* 隐藏理想区域元素 */
}

/* 你也可以定义一个类，在满足重叠条件时应用该类 */
.overlap {
  /* 根据需要应用显示/隐藏理想区域的样式 */
}

元件實作：

在你的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 (
    = idealZoneStart && displayedPercentage <= idealZoneEnd ? 'overlap' : ''}`}>
      
      
    
  );
}

export default Progressbar;

透過根據重疊條件在元件容器上有條件地應用.overlap類，CSS中的相鄰兄弟選擇器將在進度條重疊時隱藏理想區域。當條件不滿足時，理想區域將如預期顯示。