CSS の z-index 属性について 3 分で学びます

#css の z-index 属性

プロジェクトを実行するときに、レイヤーをポップアップ表示してから、このレイヤー ポップアップレイヤー上で操作を行い、操作が完了したらポップアップレイヤーを閉じるか、他の場所をクリックしてレイヤーを閉じます。

通常、z インデックス値は p スタイルに設定されます。たとえば、親レイヤーが z インデックスを 100 に設定すると、子レイヤーは 100 より大きい値に設定されます。親レイヤーがポップアップすると、を選択すると、子レイヤーを表示できます。

例 (短く書いてください):

9bd3d1511962ba90d1b141ee777f4b10
 c93057787d038d507f49406d37ba96e6
 94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

ポップアップ レイヤーを閉じる: $("#p1").hide(); // jquery .js ファイルを引用する必要があります

親レイヤーの残りの部分をクリックして親レイヤーを非表示にすることもできます。必要な作業は、p1 にイベントを追加して Hide() 関数をトリガーすることだけです。ただし、実行中に、子レイヤーをクリックすると p1 のイベントもトリガーされ、ポップアップ レイヤーが閉じられることがわかりました。明らかにエフェクトは必要ありません。明らかに p2 にはイベントが設定されていないのに、なぜですか。それは誘発されていますか？の解き方？

子レベルがどれほど高く設定されていても、親イベントがトリガーされるため、z-index を 10000 に設定しても機能しません。

解決策:

$('#p2').click(function (e) {
            e.stopPropagation();
            return false;
        });

p2 にイベントを追加し、「e.stopPropagation();」を使用してバブリングを防止し、p1 イベントがトリガーされないようにします。

読んでいただきありがとうございます。多くの利益を得られることを願っています

この記事は、https://blog.csdn.net/lilinoscar/article/details/ から転載されています。 51860462

推奨チュートリアル: 「

CSS チュートリアル 」

以上がCSS の z-index 属性について 3 分で学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。