負のz-indexを持つ要素がクリックできない問題の解決策

最近、ポップアップ広告に取り組んでいました。デフォルトページには z-index が設定されていないため、負の z-index を持つ要素はクリックできないことがわかりました。解決策は、ポップアップ広告の z-index を 1 に設定し、他の要素の z-index を増やすことです。

次のような要件があると仮定します。

ヘッダーとメイン領域はすでにあります。次に、ページに背景画像を追加する必要があります。背景レイヤーはメイン領域の下にある必要がありますが、メイン領域の外側の部分はクリック可能で、リンクになっています。

ちょっと考えてみたところ、背景画像はクリックできないので、背景画像を使用してこれを実現することはできないことに気付きました。 js を使用して body のクリックを監視し、クリック位置に基づいて背景画像がクリックされたかどうかを判断することもできますが、これはあまりにも扱いにくいです。そこで、メインエリアの下にレイヤーを追加し、z-index: -1 を設定することにしました。画像は bgImg の背景画像として設定されます。コードは次のとおりです。

 <!DOCTYPE html>
<html>
    <ヘッド>
    <スタイル>
      .bgImg {位置: absolute; z-index: -1; 背景: url(...) no-repeat center;}
    </スタイル>
    </head>
    <本文>
         <ヘッダー></ヘッダー>
         <div class="bgImg"></div>
         <div class="main"><div>
    </本文>
</html>

しかし、この設定後、負の z-index を持つ要素が body レイヤーの下に配置されるため、クリックイベントとホバーイベントが body レイヤーによってカバーされ、bgImg をクリックできず、ホバーしても手の形が表示されなくなります。

解決：

1. z-index を 0 に設定します。メイン領域を position:relative; z-index: 1; に設定します。これにより、背景レイヤーがメイン領域に影響を与えなくなり、メイン領域の外側の部分もクリックできるようになります。

2. 構造は1と同じですが、実装方法が異なります。位置を使用する代わりに、負の margin-bottom を使用します。

背景レイヤー {height: 500px; margin-bottom: -500px;}

メインエリアでは変更は必要ありません。

原則として、負の margin-bottom は下の要素を引き上げ、背景レイヤーの高さ = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom = 0 となります (設定されていないプロパティはすべて reset.css で 0 にリセットされます)。そのため、背景レイヤーはドキュメントフローのスペースを占有せず、クリックすることができます。

<<: CSS で複数の境界線を実装するためのヒント

>>: フロントエンドの vue+express ファイルのアップロードとダウンロードの例