2022年5月15日 / 最終更新日時 : 2022年5月15日 info@rishuntrading.co.jp

モーダルウィンドウでz-indexが効かない事象に遭遇

所沢市でホームページ制作や欧州輸入品の販売を行っているRishunTradingです。
今回は、モーダルウィンドウ実装時に、z-indexが効かない事象に遭遇しましたので、その原因について記載させて頂きます。
なお、「あれz-indexが効かないな。」と思ったら、こちらも参照して見て下さい。
https://rishuntrading.co.jp/blog/programing/safari_z-index_notwork/
こちらは、今回とは別の原因で、z-indexが効かなかった時の、お話です。

1.実際にz-indexが効かない事例のデモ
2.原因
- z-indexは、親要素のz-indexの影響を受ける。
3.解決策
- 修正したデモ

1.実際にz-indexが効かない事例のデモ

こちらのデモを見て下さい。
「クリックして下さい。」をクリックするとモーダルウィンドウが開くかと思います。

これは、モーダルウィンドウを表示するテストです。

画像をクリックすると、モーダルウィンドウがポップアップで表示され、クリックされた画像が表示されます。

モーダルウィンドウをポップアップで表示しているので、このモーダルウィンドウがz-index上、一番上に設定される事で、それ以外は後ろに回ります。それにより、関係のないエリアは、周りが黒で透過されます。

よくあるパターンとして、position:fixedで配置されたボタン(お問い合わせボタンやお申し込みボタンなど)がある場合には、本来、このposition:fixedで配置されたボタンも、z-indexでは後ろに回るため、黒く透過されて後ろに配置されなければならないのですが、そうはなっておらず一番上にきてしまっています。

なぜ、このような事が起きてしまうのかを今回は解説させていただきます。

お問い合わせ

こちらのモーダルウィンドウを良くみてみると、右側の「お問い合わせ」のボタンが、前面に出てしまっています。
モーダルウィンドウですので、本来であれば、この「お問い合わせ」ボタンも後ろにしたい。
こんなシーンに今回は遭遇しました。

HTML(デモ)

		<div class="blog0513-demo1">
			<section class="blog0513-sec">
				<a id="blog0513-demo1" href="#modal">
					<figure>
						<img src="./img/2022_may.jpg" alt="画像" />
						<figcaption>クリックして下さい。</figcaption>
					</figure>
				</a>
				<div>
					<p>これは、モーダルウィンドウを表示するテストです。</p>
					<p>画像をクリックすると、モーダルウィンドウがポップアップで表示され、クリックされた画像が表示されます。</p>
					<p>モーダルウィンドウをポップアップで表示しているので、このモーダルウィンドウがz-index上、一番上に設定される事で、それ以外は後ろに回ります。それにより、関係のないエリアは、周りが黒で透過されます。</p>
					<p>よくあるパターンとして、position:fixedで配置されたボタン(お問い合わせボタンやお申し込みボタンなど)がある場合には、本来、このposition:fixedで配置されたボタンも、z-indexでは後ろに回るため、黒く透過されて後ろに配置されなければならないのですが、そうはなっておらず一番上にきてしまっています。</p>
					<p>なぜ、このような事が起きてしまうのかを今回は解説させていただきます。</p>
				</div>
				<div class="blog0513-demo1-modal">
					<div class="blog0513-modal-wrap">
						<a href="#" class="blog0513-demo1-close">×</a>
						<img src="./img/2022_may.jpg" alt="画像" />
					</div>
				</div>
			</section>
			<a href="#" class="blog0513-side">お問い合わせ</a>
		</div>

<figcaption>クリックして下さい。</figcaption>

</figure>

</a>

<div>

<p>これは、モーダルウィンドウを表示するテストです。</p>

<p>画像をクリックすると、モーダルウィンドウがポップアップで表示され、クリックされた画像が表示されます。</p>

<p>モーダルウィンドウをポップアップで表示しているので、このモーダルウィンドウがz-index上、一番上に設定される事で、それ以外は後ろに回ります。それにより、関係のないエリアは、周りが黒で透過されます。</p>

<p>よくあるパターンとして、position:fixedで配置されたボタン(お問い合わせボタンやお申し込みボタンなど)がある場合には、本来、このposition:fixedで配置されたボタンも、z-indexでは後ろに回るため、黒く透過されて後ろに配置されなければならないのですが、そうはなっておらず一番上にきてしまっています。</p>

<p>なぜ、このような事が起きてしまうのかを今回は解説させていただきます。</p>

</div>

</div>

</section>

<a href="#" class="blog0513-side">お問い合わせ</a>

</div>

CSS(デモ)

.blog0513-demo1{
    position:relative;
    width:100%;
    height:300px;
    max-width:400px;
    margin:0 auto;
    border:solid 1px #999;
    overflow-y:hidden;
}
.blog0513-sec{
    position:relative;
    z-index:10;                /* 一番下 */
}
.blog0513-sec>a{
    width:50%;
    float:left;
}
.blog0513-sec>a>figure{
    width:100%;
    padding-top:75%;
    overflow:none;
    margin:0;
    position:relative;
}
.blog0513-sec>a>figure>img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:cente       r center;
    position:absolute;
    top:0;
    left:0;
}
.blog0513-sec>a>figure>figcaption{
    width:100%;
    text-align:center;
    color:#fff;
    background:rgba(0,0,0,0.2);
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
}
.blog0513-sec>div>p{
    margin:0;
    line-height:2;
}
.blog0513-demo1-modal{
    display:none;
    z-index:10;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    position:absolute;
    top:0;
    left:0;
    z-index:30;                     /* 一番上 */
}
.blog0513-modal-wrap{
    display:block;
    width:50%;
    height:50%;
    position:relative;
    margin:0 auto;
    top:40%;
    transform:translateY(-50%);
}
.blog0513-demo1-close{
    width:45px;
    height:45px;
    background:rgba(0,0,0,0.1);
    position:absolute;
    top:0;
    right:0;
    text-decoration:none;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:30px;
}
.blog0513-modal-wrap>img{
    width:100%;
    height:auto;
}
.blog0513-side{
    display:flex;
    justify-content:center;
    align-items:center;
    width:40px;
    height:150px;
    padding:20px 0;
    background:#6495ED;
    color:#fff;
    writing-mode: vertical-rl;
    border:solid #333 1px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position:absolute;
    top:80px;
    right:8px;
    z-index:20;                         /* ２番目 */
}
.blog0513-side:hover{
    filter:brightness(1.2);
}

100

101

102

103

104

105

.blog0513-demo1{

position:relative;

width:100%;

height:300px;

max-width:400px;

margin:0 auto;

border:solid 1px #999;

overflow-y:hidden;

}

.blog0513-sec{

position:relative;

z-index:10; /* 一番下 */

}

.blog0513-sec>a{

width:50%;

float:left;

}

.blog0513-sec>a>figure{

width:100%;

padding-top:75%;

overflow:none;

margin:0;

position:relative;

}

.blog0513-sec>a>figure>img{

width:100%;

height:100%;

object-fit: cover;

object-position:cente r center;

position:absolute;

top:0;

left:0;

}

.blog0513-sec>a>figure>figcaption{

width:100%;

text-align:center;

color:#fff;

background:rgba(0,0,0,0.2);

position:absolute;

top:50%;

left:0;

transform:translateY(-50%);

}

.blog0513-sec>div>p{

margin:0;

line-height:2;

}

.blog0513-demo1-modal{

display:none;

z-index:10;

width:100%;

height:100%;

background:rgba(0,0,0,0.5);

position:absolute;

top:0;

left:0;

z-index:30; /* 一番上 */

}

.blog0513-modal-wrap{

display:block;

width:50%;

height:50%;

position:relative;

margin:0 auto;

top:40%;

transform:translateY(-50%);

}

.blog0513-demo1-close{

width:45px;

height:45px;

background:rgba(0,0,0,0.1);

position:absolute;

top:0;

right:0;

text-decoration:none;

display:flex;

justify-content: center;

align-items: center;

font-size:30px;

}

.blog0513-modal-wrap>img{

width:100%;

height:auto;

}

.blog0513-side{

display:flex;

justify-content:center;

align-items:center;

width:40px;

height:150px;

padding:20px 0;

background:#6495ED;

color:#fff;

writing-mode: vertical-rl;

border:solid #333 1px;

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

position:absolute;

top:80px;

right:8px;

z-index:20; /* ２番目 */

}

.blog0513-side:hover{

filter:brightness(1.2);

}

JavaScript(JQuery)(デモ)

jQuery(document).on('click', '#blog0513-demo1', function(){
    jQuery('.blog0513-demo1-modal').fadeIn();
});
jQuery(document).ready(function($){
    jQuery('.blog0513-demo1-close').on('click', function(){
        jQuery('.blog0513-demo1-modal').fadeOut();
        return false;
    });
});

jQuery(document).on('click', '#blog0513-demo1', function(){

jQuery('.blog0513-demo1-modal').fadeIn();

});

jQuery(document).ready(function($){

jQuery('.blog0513-demo1-close').on('click', function(){

jQuery('.blog0513-demo1-modal').fadeOut();

return false;

});

・こちら解説のため要約すると、以下のような形式になっています。

HTML

<div class="blog0513">
	<section class="blog0513-sec">
		<a id="blog0513" href="#">
						/* 該当の画像情報 */
		</a>
		<div>
						/* 説明文言 */
		</div>
		<div class="blog0513-modal">	/* モーダルウィンドウ */
		</div>
	</section>
	<a href="#" class="blog0513-side">お問い合わせ</a>
</div>

/* 該当の画像情報 */

</a>

<div>

/* 説明文言 */

</div>

<div class="blog0513-modal"> /* モーダルウィンドウ */

</div>

</section>

<a href="#" class="blog0513-side">お問い合わせ</a>

</div>

CSS

CSS
.blog0513-sec{
	z-index:10;	/* メインのウィンドウ 3番目*/
}
.blog0513-demo1-modal{
	z-index:30;	/* モーダルで開くウィンドウ 一番上*/
}
.blog0513-side{
	z-index:20;	/* サイドにあるお問い合わせボタン 2番目*/
}

CSS

.blog0513-sec{

z-index:10; /* メインのウィンドウ 3番目*/

}

.blog0513-demo1-modal{

z-index:30; /* モーダルで開くウィンドウ一番上*/

}

.blog0513-side{

z-index:20; /* サイドにあるお問い合わせボタン 2番目*/

}

このCSSだけで見ると、以下の順番になっていますが、実際は、サイドにある｢お問い合わせ｣ボタンが一番上に来てしまっています。

①モーダルで開くウィンドウが一番上
②サイドにあるお問い合わせボタンが2番目
③メインのウィンドウが3番目