ネストされた要素での z-index の使用に問題があります。自分のサイトのインタラクティブな紹介チュートリアルを作成しようとしています (ライブラリ Trip.js を使用) 特定の要素を「強調表示」することで問題が発生します。
ハイライトのアプローチは次のとおりです。まず、サイト コンテンツ全体を「フェード」するために、オーバーレイが作成されます。サイトのすべての要素をカバーするために、ある程度の不透明度と z-index = 3 を取得します。強調表示する必要がある要素よりも動的に z-index = 4 を取得するため、オーバーレイの前に表示する必要があります。
問題は、この要素が position = 'relative' および z-index = 2 を持つ別の要素に含まれている可能性があることです。そのため、position = 'absolute' を強調表示された要素に設定しても、オーバーレイの背後に表示されます。 -オーバーレイの z-index よりも小さい場合の親要素のインデックス。
強調表示された要素とオーバーレイのスタイルにアクセスできますが、残念ながら一般的な方法で親要素にアクセスすることはほとんど不可能です (他のライブラリによって生成されるため、独自のスタイルなどを持つ他の要素に複数回ネストされる可能性があります)。
親要素のスタイルに関係なく、強調表示された要素をオーバーレイの前に強制的に表示する方法はありますか?