ホームページ  >  に質問  >  本文

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>
P粉124070451P粉124070451450日前579

全員に返信(1)返信します

  • P粉619896145

    P粉6198961452023-08-18 09:31:49

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

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

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

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

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

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

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

    返事
    0
  • キャンセル返事