質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • JavaScript

    18626questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6692questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4605questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2353questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Monaca

    1041questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 598

rmsequalmarx

score 30

前提・実現したいこと

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

該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen and (min-width: 593px)">
    <link rel="stylesheet" href="css/style2.css" type="text/css" media="screen and (max-width: 592px)">
    <link rel="stylesheet" href="css/map2.css" type="text/css" media="screen and (min-width: 593px)">
    <link rel="stylesheet" href="css/map4.css" type="text/css" media="screen and (max-width: 592px)">
    <script src="components/ShopManager.js"></script>
    <script src="components/LocalDBManager.js"></script>
    <script src="components/Map2.js"></script>

    <!--ドロワーメニュー関連-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </script>
<script type="text/javascript"><!--
// 配列や連想配列、オブジェクトなどの中身を視覚的に表示する関数
function vardump(arr,lv,key) {
    var dumptxt = "",
        lv_idt = "",
        type = Object.prototype.toString.call(arr).slice(8, -1);
    if(!lv) lv = 0;
    for(var i=0;i<lv;i++) lv_idt += "    ";
    if(key) dumptxt += lv_idt + "[" + key + "] => ";

    if(arr == null || arr == undefined){
        dumptxt += arr + '\n';
    } else if(type == "Array" || type == "Object"){
        dumptxt += type + "...{\n";
        for(var item in arr) dumptxt += vardump(arr[item],lv+1,item);
        dumptxt += lv_idt + "}\n";
    } else if(type == "String"){
        dumptxt += '"' + arr + '" ('+ type +')\n';
    }  else if(type == "Number"){
        dumptxt += arr + " (" + type + ")\n";
    } else {
        dumptxt += arr + " (" + type + ")\n";
    }
    return dumptxt;
}
--></script>
    <!-- Google Map API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3m1R1gNI2OM1lifFt_yQBIgS_o4qkRx4"></script>
    <script>
        function editShop2(latitude,longitude,shopID){
            location.href = "shop_edit2.html?"+latitude+'&'+longitude+'&'+shopID;
        }
    </script>
</head>
<body class="drawer drawer--left">
<button type="button" class="drawer-toggle drawer-hamburger" id="drawer_button">
            <span class="sr-only">toggle navigation</span>
            <span class="drawer-hamburger-icon"></span>
        </button>
        <nav class="drawer-nav" role="navigation">
        <!-- ここからドロップダウンの中身 -->
        <ul class="drawer-menu">
            <li class="item"><a class="drawer-menu-item" href="./index.html" >タブレットID確認</a></li>
            <li class="item"><a class="drawer-menu-item" href="./list2.html" >リストに追加</a></li>
            <li><a class="drawer-menu-item" href="#" ></a></li>
            <li class="item"><a class="drawer-menu-item" href="./goods_register.html" >商品登録</a></li>
            <li class="item"><a class="drawer-menu-item" href="./goods_edit.html" >商品編集</a></li>
            <li class="item"><a class="drawer-menu-item" href="./shop_register.html" >お店の登録</a></li>
            <li class="item"><a class="drawer-menu-item" href="./shop_edit.html" >お店の編集</a></li>
            <li><a class="drawer-menu-item" href="#" ></a></li>
            <li class="item"><a class="drawer-menu-item" href="#" >ヘルプ</a></li>
            <li class="item"><a class="drawer-menu-item" href="#" >お問い合わせ</a></li>
        </ul>
        <!-- ここまでドロップダウンの中身 -->
        </nav>
    <div id="header">
        <h2 id="title" style="margin:auto">お店を編集</h2>
        <a href="javascript:history.back()"><img class="upicon2" src="./img/back.png"></a>
    </div>
    <div id="menu">
    </div>
    <script>
        $(function() {
            var shopManagerInstance = new ShopManager();
            var localDBManagerInstance = new LocalDBManager();
            var mapInstance2 = new Map2();
            var tabletID = localDBManagerInstance.selectTabletID();

            //ショップリスト取得
            var listArray = {};
            var listResult = shopManagerInstance.getShopList(tabletID);
            var jsonList = JSON.parse(listResult);
            var jsonListLength = jsonList.length;
            var shopID;
            var shopName;
            var latitude;
            var longitude;
            var num;
            var idTextShop;
            var idTextShop2;
            var htmlText;
            var mapID = 'map-canvas1';
            for(var i=0;i<jsonListLength;i++){
                // 第二引数に obj を渡す
                Object.keys(jsonList[i]).forEach(function(key) {
                    shopID = this['shopID']; // this は obj
                    shopName = this['shopName'];
                    latitude = this['latitude'];
                    longitude = this['longitude'];
                }, jsonList[i]);
                idTextShop = "shop" + String(i+1);
                if(i == 0){
                    htmlText =  '<div class="list3" id='+idTextShop+'>'+
                                '<div class="Name3"><a href="#" onclick="editShop2('+latitude+','+longitude+','+shopID+')";return false;">'+shopName+'</a></div>'+
                                '<div class="map"><div id='+mapID+' class="map-canvas"></div></div>'
                                '</div>';
                }else{
                    idTextShop2 = "shop" + String(i);
                    mapID = "map-canvas"+String(i+1);
                    htmlText = htmlText + '<div class="list3" id='+idTextShop+'>'+
                                '<div class="Name3"><a href="#" onclick="editShop2('+latitude+','+longitude+','+shopID+')";return false;">'+shopName+'</a></div>'+
                                '<div class="map"><div id='+mapID+' class="map-canvas"></div></div>'
                                '</div>';
                }
                htmlText = htmlText + '</div>';
            };
            var parent_object = document.getElementById("list3");
            parent_object.innerHTML = htmlText;

            for(var i=0;i<jsonListLength;i++){
                // 第二引数に obj を渡す
                Object.keys(jsonList[i]).forEach(function(key) {
                    shopID = this['shopID']; // this は obj
                    shopName = this['shopName'];
                    latitude = this['latitude'];
                    longitude = this['longitude'];
                }, jsonList[i]);
                if(i == 0){
                    mapID = "map-canvas"+String(i+1);
                    mapInstance2.printMap2(latitude,longitude,mapID);
                }else{
                    mapID = "map-canvas"+String(i+1);
                    mapInstance2.printMap2(latitude,longitude,mapID);
                }
            };
            //map-canvasがまだ生成されていないのにmapを作ろうとしているからうごかない
            mapInstance2.printMap2(latitude,longitude,mapID);
        });
    </script>
    <div class="a" id="main">
        <div class="view" id="list3">

        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.drawer').drawer();
        });
    </script>
</body>
</html>
/**/
#drawer_button{
    margin-top: 0px;
}

html{
    height: 100%;
}
body{
    font-family:"MS ゴシック",san-serif;
    color:#330000;
    margin: 0px;
    padding: 0px;
    height: 100%;
}
.upicon2{
    height:30px;/**/
    width:30px;/**/
    padding-top: 10px;
    padding-right: 5px;
}

#header {
    display: flex;
    justify-content: space-between;
    width:100%;
    height: 50px;/**/
    position: fixed;  
    top: 0;  
    left: 0;
    background-color: #ffffff;
    border: 1px solid #9F99A3;
    /*z-index:998;*/
}
/*.drawer{
    z-index:999;
}*/
#header img{
    margin-top:1%;
}
/*------------------------shop_edit-------------------------*/
#list3{
    float:left;
    overflow: hidden;
    width:100%;
}
.list3{   
    display: block;
    border: 1px solid #999999;
    background-color: #c1ffe0;
    text-decoration: none;
    color: #333;
    box-sizing: border-box;
    text-align: center;
    font-size: 25px;
    width:50%;
    float: left;
}
.Name3{
    margin: auto;
    width: 65%;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
    text-overflow: ellipsis;
}
.map{
    margin-left:20px;
    height:10%;
    width:35%;

}

/* 地図キャンパス */
.map-canvas {
    margin: auto;
    width: 255px;
    height: 125px;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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

z-index - CSS | MDN

/**/
#drawer_button{
    margin-top: 0px;
}

html{
    height: 100%;
}
body{
    font-family:"MS ゴシック",san-serif;
    color:#330000;
    margin: 0px;
    padding: 0px;
    height: 100%;
}
.upicon2{
    height:30px;/**/
    width:30px;/**/
    padding-top: 10px;
    padding-right: 5px;
}

#header {
    display: flex;
    justify-content: space-between;
    width:100%;
    height: 50px;/**/
    position: fixed;  
    top: 0;  
    left: 0;
    background-color: #ffffff;
    border: 1px solid #9F99A3;
    z-index:998;
}
/*.drawer{
    z-index:999;
}*/
#header img{
    margin-top:1%;
}
/*------------------------shop_edit-------------------------*/
#list3{
    float:left;
    overflow: hidden;
    width:100%;
}
.list3{   
    display: block;
    border: 1px solid #999999;
    background-color: #c1ffe0;
    text-decoration: none;
    color: #333;
    box-sizing: border-box;
    text-align: center;
    font-size: 25px;
    width:50%;
    float: left;
}
.Name3{
    margin: auto;
    width: 65%;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
    text-overflow: ellipsis;
}
.map{
    margin-left:20px;
    height:10%;
    width:35%;
    z-index: 1;
}

/* 地図キャンパス */
.map-canvas {
    margin: auto;
    width: 255px;
    height: 125px;
}

rmsequalmarxさんの提示されている HTML と CSS を見ただけですので、別の要因がある可能性もあります。もし、直らない場合は、そのほかの CSS 等も追記していただければ、正確な回答が出てくるかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

z-index:が「コメントアウト」されているからではないでしょうか?通常表記されてはどうでしょうか?
上に置く部分と下に置く部分にz-index:は必要ですが、position:static;以外の指定も併せて必要となりますので、確認して見てください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    18626questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6692questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4605questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2353questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Monaca

    1041questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。