z-indexが効かず画像が上に表示されてしまう。

プログラミング初心者です。

画像を選択した際に、モーダルウィンドウの背景をグレーにしたいのですが、imgタグを使用し載せた画像が、浮き上がってしまい
z-indexを指定して、画像をグレー背景の後ろにしたいのですが、反映されずに困っています。
よろしくお願いします。

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/style.css">
<script src="<%=request.getContextPath() %>/js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Menu</title>
</head>
<body>
	<header>
		<nav id="nav">
			<ul>
				<li><a href="<%=request.getContextPath() %>/About">About</a></li>
				<li><a href="<%=request.getContextPath() %>/Top">DB</a></li>
				<li><a href="<%=request.getContextPath() %>/Menu">Menu</a></li>
			</ul>
		</nav>
		<div id="hamburger">
			<!-- 1番上の線 -->
			<span class="inner_line" id="line1"></span>
			<!-- 真ん中の線 -->
	    	<span class="inner_line" id="line2"></span>
	    	<!-- 1番下の線 -->
	    	<span class="inner_line" id="line3"></span>
		</div>
		<h1 align="center"><font face = serif >Portfolio</font></h1>
	</header>
	<div class="wraper">
		<div class = "wraper-inner" >
			<img alt="フォーク" src="<%=request.getContextPath() %>/image/fork.svg">
			<h1>Menu</h1>
			<img alt="シェッフ" src="<%=request.getContextPath() %>/image/chef.svg">
		</div>
		<div class="bento">
			<img alt="キーマカレー" id="keemacurry" src="<%=request.getContextPath() %>/image/Bento1.jpg">
			<img alt="1" src="<%=request.getContextPath() %>/image/Bento2.jpg">
			<img alt="2" src="<%=request.getContextPath() %>/image/Bento3.jpg">
			<br>
			<img alt="3" src="<%=request.getContextPath() %>/image/Bento4.jpg">
			<img alt="4" src="<%=request.getContextPath() %>/image/Bento5.jpg">
			<img alt="5" src="<%=request.getContextPath() %>/image/Bento6.jpg">
		</div>
	</div>
	<div id="keemacurry_popup" class="modal">
		<div id="closebtn" class="closebtn">×</div>
		<p>★キーマカレー</p>
	</div>
</body>
</html>

css

@charset "UTF-8";

* {
	 margin: 0;
	 padding: 0;
  }

body {
	/*背景色*/
	background-color:#e9eef8;
}

header {
  	position: fixed;
  	width: 100%;
  	height: 90px;
  	background: #ceeaf4;
}

header h1{
	line-height: 83px;
	color: #273b6a;
}

.wraper{
	background-color: #ffffff;
	padding: 110px 30px 30px 100px;
	margin: 0 20px 20px 20px;
}

.wraper img{
	height: 100px;
	top: 0;
	text-align: left;
}

.selfintroduction h2{
	display :inline;
}

.selfintroduction{
	width: 80%;
	text-align: left;
	padding-left :100px;
}

.introductionText{
	padding-left: 130px;
}

/*ナビメニュー	*/
#nav{
	position: absolute;
	top : 0;
	/*ナビメニューを左に隠した状態になる*/
	width: 100%;
	left: -100%;
	/*
	width: 40%;
	left: -40%;
	*/
	height: 100vh;
	/*0.7秒かけてナビメニューがスライドする*/
	transition: .7s;
	background: #ffffff;
}

#nav ul{
    padding-top: 80px;
}
#nav ul li{
	/*リスト項目要素のマーカーを設定(非表示）*/
    list-style-type: none;
    font-size: 20px;
}

#nav a{
    display: block;
    /*リンクの下線を*/
    text-decoration: none;
    color: #7c90e1;
    margin: 0 15px;
    padding: 10px;
    /*0.5秒かけてナビメニューがスライドする*/
    transition: .5s;
}

#nav li a:hover{
    color: #ffffff;
    background: #475fa5;
    border-bottom: none;
}

/*ハンバーガーメニュー*/
#hamburger {
	display: block;
	position: absolute;
	top: 20px;
	left: 30px;
    width: 50px;
    height: 44px;
    cursor: pointer;
    transition: 1s;
}

.inner_line {
	display: block;
	position: absolute;
	left: 0;
	width: 50px;
    height: 5px;
    background-color: #95a7e5;
    transition: 1s;
    border-radius: 4px;
}

#line1 {
  top: 0;
}
#line2 {
  top: 20px;
}
#line3 {
  bottom: 0px;
}

.in{
  	transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  	background: #98a5e0;
}
.line_1 {
	/*-45度回転させる*/
	transform: translateY(20px) rotate(-45deg);
	top: 0;
}
.line_2 {
	opacity: 0;
}
.line_3 {
	/*45度回転させる*/
	transform: translateY(-20px) rotate(45deg);
	bottom: 0;
}

/*メニュー画面の背景をフルサイズで設定する(保留）*/
.menu_images_aa {
	position: relative;
	width:100%;
	/*background: url("../image/hotel.jpg") ;*/
	min-height: 100vh;
	/*繰り返しはしない*/
	background-repeat: no-repeat;
	background-size : cover;
}

.wraper-inner {
	margin-left: -28px;
    margin-right: 40px;
    text-align: center;
}

.wraper-inner h1 {
	font-family: cursive;
	display: inline;
}

.wraper-inner img {
	height: 40px;
}

.bento img{
	/*position:relative;*/
	width:30%;
	height: 100%;
	/*z-index: 10;*/
}

.bento img:hover {
	cursor: pointer;
	opacity: 0.5;
	transition: .5s;
}

.bento {
	position:relative;
	z-index: 10;
}

.modal {
	display:none;
	position: absolute;
    width: 60%;
    background-color: #fff;
    margin-left: 120px;
    top: 300px;
    height: 100px;
    z-index: 30;
}

.modal p {
	text-align: center;
    font-family: cursive;
}

.closebtn {
	text-align: right;
    margin-right: 19px;
    font-size: 140%;
    font-weight: bold;
    cursor: pointer;
}

.modalback{
	position: fixed;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000000;
	opacity: 0.8;
	z-index: 20;
}

window.onload = function() {
	/*キーマカレーがクリックされたか*/
	var img = document.getElementById('keemacurry');
	/*モーダル表示用*/
	var modal = document.getElementById('keemacurry_popup');
	/*閉じるボタン*/
	var closebtn = document.getElementById('closebtn');
	/*body*/
	var body = document.getElementsByTagName('body');
	/*wrapper*/
	var wrapper = document.getElementsByClassName('wraper');


	function keemacurry(){
	    'キーマカレー'
		modal.style.display = 'block';

		for (var i = 0; i < wrapper.length; i++) {
			  var element = wrapper[i];
			  element.classList.add('modalback');
		}
	}

	function close_keemacurry(){
	    'キーマカレー'
		modal.style.display = 'none';
		body.style.display = 'block';
	}

	img.addEventListener('click',keemacurry);
	closebtn.addEventListener('click',close_keemacurry);
}

写真、アイコンをグレー背景の後ろに置きたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

背景要素に指定している要素がよろしくないのかも。

javascript
1 function keemacurry() {
2    "キーマカレー";
3    modal.style.display = "block";
4    
5    //追加
6    const modalBackElm = document.createElement('div');
7    modalBackElm.classList.add("modalback")
8    modal.after(modalBackElm);
9
10    // for (var i = 0; i < wrapper.length; i++) {
11    //   var element = wrapper[i];
12    //   element.classList.add("modalback");
13    // }
14  }

css
1.modalback {
2  position: fixed;
3  height: 100%;
4  width:100%;
5  top: 0;
6  left: 0;
7  background-color: #000000;
8  opacity: 0.8;
9  z-index: 29;
10}