z-indexを使用せずにdivをオーバーラップする
<p>解決できない問題に遭遇したので、CSS マジックを考えていますが、この問題に対する最善のアプローチは何でしょうか? </p>
<p>理想的な領域と実際の進行状況バーを備えた進行状況バー コンポーネントがあります。プログレスバーが理想的な領域に重なっている場合、理想的な領域を、Z 値が小さいかのように非表示にしたいと考えています。これを試してみたところ、静的に配置された要素では z-index が機能しないことがわかりました。この動作を再現するにはどうすればよいですか?これはコンポーネントのコードです。これもスタイル設定に tailwind を使用します。 </p>
<pre class="brush:php;toolbar:false;">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>
);
}
デフォルトのプログレスバーをエクスポート;</pre>