<p>해결할 수 없을 것 같은 문제에 부딪혔고 CSS 마법을 생각하고 있는데 이 문제에 대한 최선의 접근 방식은 무엇입니까? </p> <p>이상적인 영역과 실제 진행률 표시줄이 있는 진행률 표시줄 구성요소가 있습니다. 진행률 표시줄이 이상적인 영역과 겹칠 때 z 값이 더 작은 것처럼 이상적인 영역을 숨기고 싶습니다. 이것을 시도한 결과 z-index가 정적으로 배치된 요소에서 작동하지 않는 것으로 나타났습니다. 이 동작을 어떻게 복제할 수 있습니까? 다음은 스타일링을 위해 tailwind를 사용하는 구성요소의 코드입니다. </p> <pre class="brush:php;toolbar:false;">'react'에서 React, { useEffect, useState }를 가져옵니다. ProgressbarProps = {를 입력하세요. 값: 숫자, maxValue: 숫자, 백분율한도: 숫자, IdealZone: 숫자 }; function Progressbar({ value, maxValue, PercentCap, IdealZone }: ProgressbarProps) { const [displayedPercentage, setDisplayedPercentage] = useState(0); const IdealZoneStart = 100 - IdealZone/2; const IdealZoneEnd = 100 + IdealZone/2; useEffect(() => { const ActualPercentage = (값 / maxValue) * 100; setDisplayedPercentage(Math.min(percentageCap, ActualPercentage)); }, [값, 최대값]); const 진행바색상 = 표시 백분율 < IdealZoneStart ? 'bg-오렌지-500' : 표시비율 > IdealZoneEnd ? 'bg-레드-500' : 'bg-녹색-500'; const 진행바스타일 = { 너비: `${(displayedPercentage / PercentageCap) * 100}%`, }; const IdealZoneStyle = { 왼쪽: `${(idealZoneStart / PercentageCap) * 100}%`, 너비: `${((idealZoneEnd - IdealZoneStart) / PercentageCap) * 100}%`, }; 반품 ( <div className="relative"> <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> ); } 기본 진행률 내보내기;</pre>