CSSのz-indexでコンテンツをオーバーレイをする

開発環境は、Windows10 Pro(64bit) + Firefox 69.0.3(64bit)。

例えば、ボタンをクリックして、モーダルを表示させるときなど、ウィンドウ以外の背景部分のコンテンツの上に、分かりやすくするために、透過した色の背景をオーバーレイして、クリックできないようにしたりするものです。(ただし、クリックすると、モーダル自体が消えてコンテンツをクリックできるようになる)

これを実現するためには、CSSのz-indexを用います。z-indexは、指定した要素のCSSのpositionがstatic以外でないと使用できませんので、static以外のpositionを選ばないといけません。

以下のコードでは、ボタンをクリックすると、ボタン以外の背景は薄暗くなります。もう一度、ボタンをクリックすると、元に戻ります。薄暗くなった状態で、「アラートを表示します」と書かれたボタンをクリックしても機能しないと思います。「オーバーレイする」と書かれたボタンが薄暗くならないのは、オーバーレイした値よりも、z-indexの値が大きいからです。

オーバーレイの背景に使用したい要素(今回の場合は、以下のコードでは、.overlay部分)は、positionをfixedにすると、スクロールしても画面全体を覆いますが、positionをabsoluteにしてしまった場合、今見えている画面全体しか覆いませんので注意が必要です。
そして、背景よりも、上に表示したい要素は、positionをrelativeにしましょう。

■CSS部分

#content_block{
  width:150px;
  height:150px;
  z-index:50;
  position:relative;
}

.overlay{
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.4);
  z-index:10;
  position:fixed;
}

■JavaScript(jQuery部分)

$(function(){
  $(document).on('click', '#alert_btn', function(e){
    alert("アラートを表示しました");
  });

  $(document).on('click','#overlay_btn',function(e){
    $('#overlay_parts').toggleClass('overlay');
  });
});

■HTML部分

<html>
<body>
  <div id="overlay_parts"></div>
  <div id="content_block">
  <button id="overlay_btn">オーバーレイする</button>
  </div>
  いろいろなコンテンツがここに入っていく。
<button id="alert_btn">アラートを表示します</button>
</body>
</html>

■参考リンク
z-index－スタイルシートリファレンス

k01ken’s b10g

He110 W0r1d!

CSSのz-indexでコンテンツをオーバーレイをする