CSS の z-index 属性について 3 分で学びます-CSSの知識-php.cn

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

烟雨青岚

リリース： 2020-07-01 11:25:01

転載

8819 人が閲覧しました

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

#css の z-index 属性

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

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

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

<p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 100;height:300px" id="p1" >
 <p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 101;height:100px" id="p2" >
 </p>
</p>

ログイン後にコピー

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

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

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

解決策:

$(&#39;#p2&#39;).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 サイトの他の関連記事を参照してください。