divを前面配置にしたい

マップの上にボタンがあり、押すと右からdivが出るようなコードになっています。

実現したい事として、ボタンを押すと出るdivを右下にあるクレジット表記より前に配置したいこと。

現状がマップの上にdivは表示されるが、右下にあるLeaflet@OpenSteetMapの表記より後ろになっています。右下にあるLeaflet@OpenSteetMapが隠れるようにしたいです。

z-indexで重なりの順序を変えるとかあったので、divに指定しても変わりませんでした。

解決方法が分かる方、教えて頂きたいです。

html
1<html>
2
3<head>
4  <title>Leaflet</title>
5  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
6  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
7  <link rel="stylesheet" href="menu.css" type="text/css">
8
9</head>
10
11<body>
12  <div id="map" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>
13   <button type="button" class="submit-btn" onclick="menu_ctl()">ボ</button>
14  <div class="menu">
15
16  </div>
17
18  <script>
19    var map = L.map('map').setView([35.664035, 139.698212], 15);
20
21    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
22      maxZoom: 18,
23      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
24    });
25
26
27    map.addLayer(tiles);
28
29
30  </script>
31</body>
32
33</html>
34

css

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

回答1件

ベストアンサー

Leaflet@OpenSteetMapの表記にz-index: 1000;が設定されているので、それ以上のz-index値を設定すればいいでしょう。

css
1.menu {
2  background-color: aquamarine;
3  width: 370px;
4  height: 100%;
5  position: fixed;
6  top: 30px;
7  right: 0px;
8  transition-property: all;
9  transition-duration: 1s;
10  z-index: 1001; /* 追加 */
11}