Google mapをヘッダーの後面にもっていきたい

###前提・実現したいこと
Monacaでお店を編集するシステムを作っています。
私はこのサイト(ヘッダーとフッターの固定)で
ヘッダーを固定して、スクロールしてもヘッダーの後ろを通るようにできていたと思ったら、Google mapだけがヘッダーの前面に出てきてしまいます。z-indexで後面にしようとしても変わりませんでした（やり方が間違っているかも）
どのようにしたら後面にもっていけるのでしょうか

###該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen and (min-width: 593px)">
10    <link rel="stylesheet" href="css/style2.css" type="text/css" media="screen and (max-width: 592px)">
11    <link rel="stylesheet" href="css/map2.css" type="text/css" media="screen and (min-width: 593px)">
12    <link rel="stylesheet" href="css/map4.css" type="text/css" media="screen and (max-width: 592px)">
13    <script src="components/ShopManager.js"></script>
14    <script src="components/LocalDBManager.js"></script>
15    <script src="components/Map2.js"></script>
16    
17    <!--ドロワーメニュー関連-->
18    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
19    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
20    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
21    <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
22    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
23    </script>
24<script type="text/javascript"><!--
25// 配列や連想配列、オブジェクトなどの中身を視覚的に表示する関数
26function vardump(arr,lv,key) {
27    var dumptxt = "",
28        lv_idt = "",
29        type = Object.prototype.toString.call(arr).slice(8, -1);
30    if(!lv) lv = 0;
31    for(var i=0;i<lv;i++) lv_idt += "    ";
32    if(key) dumptxt += lv_idt + "[" + key + "] => ";
33    
34    if(arr == null || arr == undefined){
35        dumptxt += arr + '\n';
36    } else if(type == "Array" || type == "Object"){
37        dumptxt += type + "...{\n";
38        for(var item in arr) dumptxt += vardump(arr[item],lv+1,item);
39        dumptxt += lv_idt + "}\n";
40    } else if(type == "String"){
41        dumptxt += '"' + arr + '" ('+ type +')\n';
42    }  else if(type == "Number"){
43        dumptxt += arr + " (" + type + ")\n";
44    } else {
45        dumptxt += arr + " (" + type + ")\n";
46    }
47    return dumptxt;
48}
49--></script>
50    <!-- Google Map API -->
51    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3m1R1gNI2OM1lifFt_yQBIgS_o4qkRx4"></script>
52    <script>
53        function editShop2(latitude,longitude,shopID){
54            location.href = "shop_edit2.html?"+latitude+'&'+longitude+'&'+shopID;
55        }
56    </script>
57</head>
58<body class="drawer drawer--left">
59<button type="button" class="drawer-toggle drawer-hamburger" id="drawer_button">
60            <span class="sr-only">toggle navigation</span>
61            <span class="drawer-hamburger-icon"></span>
62        </button>
63        <nav class="drawer-nav" role="navigation">
64        <!-- ここからドロップダウンの中身 -->
65        <ul class="drawer-menu">
66            <li class="item"><a class="drawer-menu-item" href="./index.html" >タブレットID確認</a></li>
67            <li class="item"><a class="drawer-menu-item" href="./list2.html" >リストに追加</a></li>
68            <li><a class="drawer-menu-item" href="#" ></a></li>
69            <li class="item"><a class="drawer-menu-item" href="./goods_register.html" >商品登録</a></li>
70            <li class="item"><a class="drawer-menu-item" href="./goods_edit.html" >商品編集</a></li>
71            <li class="item"><a class="drawer-menu-item" href="./shop_register.html" >お店の登録</a></li>
72            <li class="item"><a class="drawer-menu-item" href="./shop_edit.html" >お店の編集</a></li>
73            <li><a class="drawer-menu-item" href="#" ></a></li>
74            <li class="item"><a class="drawer-menu-item" href="#" >ヘルプ</a></li>
75            <li class="item"><a class="drawer-menu-item" href="#" >お問い合わせ</a></li>
76        </ul>
77        <!-- ここまでドロップダウンの中身 -->
78        </nav>
79    <div id="header">
80        <h2 id="title" style="margin:auto">お店を編集</h2>
81        <a href="javascript:history.back()"><img class="upicon2" src="./img/back.png"></a>
82    </div>
83    <div id="menu">
84    </div>
85    <script>
86        $(function() {
87            var shopManagerInstance = new ShopManager();
88            var localDBManagerInstance = new LocalDBManager();
89            var mapInstance2 = new Map2();
90            var tabletID = localDBManagerInstance.selectTabletID();
91            
92            //ショップリスト取得
93            var listArray = {};
94            var listResult = shopManagerInstance.getShopList(tabletID);
95            var jsonList = JSON.parse(listResult);
96            var jsonListLength = jsonList.length;
97            var shopID;
98            var shopName;
99            var latitude;
100            var longitude;
101            var num;
102            var idTextShop;
103            var idTextShop2;
104            var htmlText;
105            var mapID = 'map-canvas1';
106            for(var i=0;i<jsonListLength;i++){
107                // 第二引数に obj を渡す
108                Object.keys(jsonList[i]).forEach(function(key) {
109                    shopID = this['shopID']; // this は obj
110                    shopName = this['shopName'];
111                    latitude = this['latitude'];
112                    longitude = this['longitude'];
113                }, jsonList[i]);
114                idTextShop = "shop" + String(i+1);
115                if(i == 0){
116                    htmlText =  '<div class="list3" id='+idTextShop+'>'+
117                                '<div class="Name3"><a href="#" onclick="editShop2('+latitude+','+longitude+','+shopID+')";return false;">'+shopName+'</a></div>'+
118                                '<div class="map"><div id='+mapID+' class="map-canvas"></div></div>'
119                                '</div>';
120                }else{
121                    idTextShop2 = "shop" + String(i);
122                    mapID = "map-canvas"+String(i+1);
123                    htmlText = htmlText + '<div class="list3" id='+idTextShop+'>'+
124                                '<div class="Name3"><a href="#" onclick="editShop2('+latitude+','+longitude+','+shopID+')";return false;">'+shopName+'</a></div>'+
125                                '<div class="map"><div id='+mapID+' class="map-canvas"></div></div>'
126                                '</div>';
127                }
128                htmlText = htmlText + '</div>';
129            };
130            var parent_object = document.getElementById("list3");
131            parent_object.innerHTML = htmlText;
132            
133            for(var i=0;i<jsonListLength;i++){
134                // 第二引数に obj を渡す
135                Object.keys(jsonList[i]).forEach(function(key) {
136                    shopID = this['shopID']; // this は obj
137                    shopName = this['shopName'];
138                    latitude = this['latitude'];
139                    longitude = this['longitude'];
140                }, jsonList[i]);
141                if(i == 0){
142                    mapID = "map-canvas"+String(i+1);
143                    mapInstance2.printMap2(latitude,longitude,mapID);
144                }else{
145                    mapID = "map-canvas"+String(i+1);
146                    mapInstance2.printMap2(latitude,longitude,mapID);
147                }
148            };
149            //map-canvasがまだ生成されていないのにmapを作ろうとしているからうごかない
150            mapInstance2.printMap2(latitude,longitude,mapID);
151        });
152    </script>
153    <div class="a" id="main">
154        <div class="view" id="list3">
155            
156        </div>
157    </div>
158    <script>
159        $(document).ready(function() {
160            $('.drawer').drawer();
161        });
162    </script>
163</body>
164</html>
165

css
1/**/
2#drawer_button{
3    margin-top: 0px;
4}
5
6html{
7    height: 100%;
8}
9body{
10    font-family:"ＭＳ ゴシック",san-serif;
11    color:#330000;
12    margin: 0px;
13    padding: 0px;
14    height: 100%;
15}
16.upicon2{
17    height:30px;/**/
18    width:30px;/**/
19    padding-top: 10px;
20    padding-right: 5px;
21}
22
23#header {
24    display: flex;
25    justify-content: space-between;
26    width:100%;
27    height: 50px;/**/
28    position: fixed;  
29    top: 0;  
30    left: 0;
31    background-color: #ffffff;
32    border: 1px solid #9F99A3;
33    /*z-index:998;*/
34}
35/*.drawer{
36    z-index:999;
37}*/
38#header img{
39    margin-top:1%;
40}
41/*------------------------shop_edit-------------------------*/
42#list3{
43    float:left;
44    overflow: hidden;
45    width:100%;
46}
47.list3{   
48    display: block;
49    border: 1px solid #999999;
50    background-color: #c1ffe0;
51    text-decoration: none;
52    color: #333;
53    box-sizing: border-box;
54    text-align: center;
55    font-size: 25px;
56    width:50%;
57    float: left;
58}
59.Name3{
60    margin: auto;
61    width: 65%;
62    height: 40px;
63    white-space: nowrap;
64    overflow: hidden;
65    margin: auto;
66    text-overflow: ellipsis;
67}
68.map{
69    margin-left:20px;
70    height:10%;
71    width:35%;
72    
73}
74
75/* 地図キャンパス */
76.map-canvas {
77    margin: auto;
78    width: 255px;
79    height: 125px;
80}

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

回答2件

ベストアンサー

z-index プロパティは、重なりの順序を指定するものですので、下に回り込ませたい Google Map 部分にも指定する必要があります。
必要最低限の加筆をしたCSSを記載しておきます。

z-index - CSS | MDN

css
1/**/
2#drawer_button{
3    margin-top: 0px;
4}
5
6html{
7    height: 100%;
8}
9body{
10    font-family:"ＭＳ ゴシック",san-serif;
11    color:#330000;
12    margin: 0px;
13    padding: 0px;
14    height: 100%;
15}
16.upicon2{
17    height:30px;/**/
18    width:30px;/**/
19    padding-top: 10px;
20    padding-right: 5px;
21}
22
23#header {
24    display: flex;
25    justify-content: space-between;
26    width:100%;
27    height: 50px;/**/
28    position: fixed;  
29    top: 0;  
30    left: 0;
31    background-color: #ffffff;
32    border: 1px solid #9F99A3;
33    z-index:998;
34}
35/*.drawer{
36    z-index:999;
37}*/
38#header img{
39    margin-top:1%;
40}
41/*------------------------shop_edit-------------------------*/
42#list3{
43    float:left;
44    overflow: hidden;
45    width:100%;
46}
47.list3{   
48    display: block;
49    border: 1px solid #999999;
50    background-color: #c1ffe0;
51    text-decoration: none;
52    color: #333;
53    box-sizing: border-box;
54    text-align: center;
55    font-size: 25px;
56    width:50%;
57    float: left;
58}
59.Name3{
60    margin: auto;
61    width: 65%;
62    height: 40px;
63    white-space: nowrap;
64    overflow: hidden;
65    margin: auto;
66    text-overflow: ellipsis;
67}
68.map{
69    margin-left:20px;
70    height:10%;
71    width:35%;
72    z-index: 1;
73}
74
75/* 地図キャンパス */
76.map-canvas {
77    margin: auto;
78    width: 255px;
79    height: 125px;
80}