解決できない問題に遭遇したので、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}%`、 }; 戻る （ 
 
 
 
 ); } デフォルトのプログレスバーをエクスポート;