z-indexを使用せずにdivをオーバーラップする

Question

解決できない問題に遭遇したので、CSS マジックを考えていますが、この問題に対する最善のアプローチは何でしょうか?

理想的な領域と実際の進行状況バーを備えた進行状況バー コンポーネントがあります。プログレスバーが理想的な領域に重なっている場合、理想的な領域を、Z 値が小さいかのように非表示にしたいと考えています。これを試してみたところ、静的に配置された要素では z-index が機能しないことがわかりました。この動作を再現するにはどうすればよいですか?これはコンポーネントのコードです。これもスタイル設定に tailwind を使用します。

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

type ProgressbarProps = {
  値: 数値、
  maxValue: 数値、
  パーセンテージキャップ: 数値、
  IdealZone: 数値
};

function Progressbar({ value, maxValue,percentageCap, IdealZone }: ProgressbarProps) {
  const [displayedPercentage, setDisplayedPercentage] = useState(0);
  
  const IdealZoneStart = 100 - IdealZone/2;
  const IdealZoneEnd = 100 IdealZone/2;

  useEffect(() => {
    constactualPercentage = (値 / 最大値) * 100;
    setDisplayedPercentage(Math.min(percentageCap,actualPercentage));
  }, [値, maxValue]);

  const progressBarColor =
    表示パーセンテージ < IdealZoneStart
      ? 'bg-オレンジ-500'
      : 表示パーセンテージ > IdealZoneEnd
      ? 'bg-red-500'
      : 'bg-green-500';


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

  const IdealZoneStyle = {
    左: `${(idealZoneStart /percentageCap) * 100}%`、
    幅: `${((idealZoneEnd - IdealZoneStart) /percentageCap) * 100}%`、
  };

  戻る （
    <div className="相対">
      <div className={`h-4 四捨五入 ${progressBarColor}`} style={progressBarStyle}></div>
    <div className="absolute top-0 left-0 w-full h-4 bg-gray-200" style={idealZoneStyle}></div>
    </div>
  );
}

デフォルトのプログレスバーをエクスポート;

Answer 1

これがあなたの質問の答えになるかどうかはわかりませんが、これを試してください:

1. CSS セレクターとスタイル:

   まず、必要な CSS セレクターとスタイル ルールを定義します。コンポーネント コンテナーのクラス名が .progressbar-container であると仮定すると、隣接する兄弟セレクター ( ) を使用して目的の領域を見つけ、スタイルを適用してそれを非表示にし、進行状況バーの重なりを防ぐことができます。

   リーリー

2. コンポーネントの実装:

   React コンポーネントの実装では、.overlap クラスの概念を使用して、理想的な領域の動作を制御し、重複条件に基づいて判断できます。 リーリー

オーバーラップ条件に基づいてコンポーネント コンテナに

.overlap クラスを条件付きで適用すると、プログレス バーが重なったときに CSS の隣接する兄弟セレクターによって目的の領域が非表示になります。条件が満たされていない場合は、期待通りの理想領域が表示されます。