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

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

ただいまの
回答率

89.97%

z-indexの仕様について(モーダル画面)

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,747

KandM

score 23

下記のコードでモーダル画面作成を試みているのですが、モーダルのコンテンツ画面が前面に出てこず、オーバレイが全面にでてきてしまっています。
z-indexもコンテンツ要素のところを9999にしたりと、思考錯誤してみましたがうまくいきません。。。

コードはz-indexを使用している箇所のみ抜粋しています。
解説に必要ということであれば追加していきますので、その際はお申し付けください!

ご指導よろしくお願いします!!!

body,
    ul,
    li {
      margin: 0;
      padding: 0;
    }

    .wrapper {
      box-sizing: border-box;
      padding: 0 15px;
      margin-top: 56px;

    }

    img {
      max-width: 100%;
      height: 300px;
    }
 /*ヘッダー全体の色、サイズ変更*/
    header {
      background: #F0F8FF;
      color: #ccc;
      padding: 25px;
      top: 0;

    }

    footer {
      background: #ccc;
      padding: 1rem;
      position:center;
    }

       /*nabi開閉部分*/
    .nav-wrap{
        box-sizing: border-box;
        position: fixed;
        top: 0;
        width: 100%;
        height:34px;
        padding:0;

    }
    .gnav {
      list-style-type: none;
      background: #FFFAFA;
      width: 100%;
      z-index: 99;
      position:fixed;
    }

    .gnav li {
      border-bottom: 1px solid #333;
    }

    .gnav li a {
      display: block;
      text-decoration: none;
      /* (44-16)/2=14px */
      padding: .875rem 1rem;
    }

    /*header_title*/
#header_title{
        top:0;
        position:fixed;
        coolor:#FF00FF;
        left:50%;
        right:50%;

    }


    /*ハンバーガーボタン*/

    .icon-animation {
      width: 44px;
      height: 44px;
      display: block;
      cursor: pointer;
      float: right;
      position: absolute;
      right: .5rem;
      text-align: center;
      top: .3rem;
    }

    .icon-animation span {
      width: 39px;
      height: 5px;/*ヘッダーメニューアイコンの線の太さ変更*/
      border-radius:27%;
      display: block;
      background: #00ffff;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -25px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .icon-animation .top {
      -webkit-transform: translateY(-13px);
      -ms-transform: translateY(-13px);
      transform: translateY(-13px);
    }

    .icon-animation .bottom {
      -webkit-transform: translateY(13px);
      -ms-transform: translateY(13px);
      transform: translateY(13px);
    }

    .is-open .middle {
      background: rgba(51, 51, 51, 0);
    }

    .is-open .top {
      -webkit-transform: rotate(-45deg) translateY(0px);
      -ms-transform: rotate(-45deg) translateY(0px);
      transform: rotate(-45deg) translateY(0px);
    }

    .is-open .bottom {
      -webkit-transform: rotate(45deg) translateY(0px);
      -ms-transform: rotate(45deg) translateY(0px);
      transform: rotate(45deg) translateY(0px);
    }

#top_content{
    img{
   width: 100%  ;
   max-height:319px;
}
}
Title{
    width:200px;
    height:100px;
    background: blue;
    text-align:center;
    line-height: 100px;
}



   /*以下、片手操作用*/
#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 240px;
  height: 240px;
  border-radius: 126px;
  border: 6px solid #0000CD;
  background: #F8F8FF;
  margin-left:auto;
  margin-right: 0px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
   -moz-transform: rotate(180deg);
  -moz-transition: -moz-transform 0.5s ease-out;
  -webkit-transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transform: rotate(180deg);
  transition: transform 0.5s ease-out;
}
 #menu ul li {
  width: 40px;
  height: 40px;
  border-radius: 22px;
  border: 2px solid #0000CD;
  background: #252925;
  overflow: hidden;
  margin-left:auto;
  margin-right:0px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  position:relative;
}

#menu ul li:nth-child(1) {
  top: -25px;
  right: 110px;
}

#menu ul li:nth-child(2) {
  top: -30px;
  right: 185px;
}

#menu ul li:nth-child(3) {/*SNSボタン部分*/
  top: 0px;
  right: 220px;
    color: #fff;
    background-color: #f00;
    transition: .3s ease;
}

#menu ul li#openMenu {
  top: 50px;
  right: 10px;
  cursor: pointer;
}
#menu ul li#closeMenu {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  top: -140px;
  margin-right: 0px;
  border: none;
  background-color: transparent;
  box-shadow: none;
  text-align: center;
  color: #252925;
}
#menu ul.active {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.5s ease-out;
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}
#menu {
  position: fixed;
  margin: 0;
  padding: 0;
  right: -180px;
  bottom: -180px;
   -moz-transition: right 0.5s ease-out, bottom 0.5s ease-out;
  -webkit-transition: right 0.5s ease-out, bottom 0.5s ease-out;
  transition: right 0.5s ease-out, bottom 0.5s ease-out;
}
div.active {
  right: -100px !important;
  bottom: -100px !important;
  -moz-transition: right 0.5s ease-out, bottom 0.5s ease-out;
  -webkit-transition: right 0.5s ease-out, bottom 0.5s ease-out;
  transition: right 0.5s ease-out, bottom 0.5s ease-out;
}

/*
    SNSボタン部分
*/


#modal-content {
    width: 50% ;
    margin: 0 ;
    padding: 10px 20px ;
    border: 2px solid #aaa ;
    background: #fff ;
    position: fixed ;
    display: none ;
    z-index: 2 ;
}

#modal-overlay {
    z-index: 1 ;
    display: block ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 120% ;
    background-color: rgba( 0,0,0, 0.40 ) ;
}

.button-link {
    color: #00f ;
    text-decoration: underline ;
}

.button-link:hover {
    cursor: pointer ;
    color: #f00 ;
}


以下HTML5

<body>

    <d  iv class="nav-wrap">
        <header>
            <div id="header_title" >
            <a href="./"><h2>BDM</h2></a>
                </div>
            <div class="gnav-btn">
                <div class="icon-animation">
                    <span class="top"></span>
                    <span class="middle"></span>
                    <span class="bottom"></span>
                </div>
            </div>
        </header>
        <nav>
            <ul class="gnav">
                <li><a href=""></a></li>    
                <li><a href=""></a></li>
                <li><a href="">カテゴリーリスト</a></li>
                <li><a href="">#TagList</a></li>
                <li><a href=""></a></li>
            </ul>
        </nav>
    </div>
    <div class="wrapper">
        <h1>sample</h1>
        <section id="top_content">
            <div class="top_pic">
            <img src="http://lorempixel.com/400/200" alt="トップ画像">
                </div>
            <div>
                <p id="title">
                         <Titile><h3>kokonutitle</h3></Titile>
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
            </div>
        </section>

  </div>

    <!--以下、片手メニュー-->
    <div id="menu">
        <ul>
            <li><a href="./"><img src="" alt="ホーム" /></a></li>
            <li><a href="./"><img src="" alt="検索" /></a></li>
            <!--以下SNS拡散フォーム-->
            <li>

                <p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p>

            </li>
            <!--ここまでSNS拡散-->
            <li id="openMenu"><img src="" alt="メニューを開く" /></li>
            <li id="closeMenu">メニューを閉じる</li>
        </ul>   
    </div>


    <footer>Footer</footer>
        <div id="modal-content">
            <!-- モーダルウィンドウのコンテンツ開始 -->
            <p>モーダルウィンドウのコンテンツをHTMLで自由に編集することができます。画像や、動画埋め込みなど、お好きなものを入れて下さい。</p>
            <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
            <p><a id="modal-close" class="button-link">閉じる</a></p>
            <!-- モーダルウィンドウのコンテンツ終了 -->
        </div>

</body>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • KandM

    2016/06/17 17:30

    すみません!その通りです。。修正いたします!

    キャンセル

  • ARADDIO

    2016/06/17 17:43

    試してみましたが、こちらの環境ではうまくいってしまいました。
    "nav-wrap"等ほかの要素が悪さをしてるかもしれませんので、CSSをまるっと貼っていただけませんか?

    キャンセル

  • KandM

    2016/06/17 17:51

    CSSの方修正しました!よろしくお願いいたします。

    キャンセル

回答 2

+3

z-indexpositionの値がstatic以外の値に設定されていないと効きません。
見たところ、z-indexだけ設定されてpositionの設定がされていない箇所があるようなので、
その辺りを見なおしてみてはいかがでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/17 17:19

    回答ありがとうございます!
    むしろ、positionの設定をしていないところのz-indexは不要なところでして、私の消し忘れでした。。
    消してもやはりモーダルコンテンツが陰になってしまっています。。

    キャンセル

  • 2016/06/17 18:19

    掲載されているHTML/CSSをまるまるコピーし、
    ・#modal-contentをdisplay:block;に変更
    ・#modal-overlay用のdivをHTMLに追加(#modal-contentの親要素として)
    上記2点の修正を加えてChromeで確認したところ、普通にモーダルコンテンツが上に来ております。
    つまり、現状のCSSに問題はないということです。

    最初に#modal-contentがdisplay:none;になっており、#modal-ovarlayのdiv要素がHTMLに記載されていないことを考えると、問題はモーダルを表示するためのJS(jQuery?)の記述・表示JSの前提としているHTML構造に問題があるものと思われます。
    下に隠れてしまっているのではなく、そもそもモーダルレイヤー自体が表示されていないのではありませんか?

    モーダル表示のJSコードも記載してみてください。
    原因が分かるかもしれません。

    キャンセル

  • 2016/06/17 18:34

    回答ありがとうございます!
    #modal-contentがdisplay:none;は、他に実装する予定の追跡ボタンのクリック時のみ表示させようと思っておりまして、通常時は見えないようにする仕様のためです!

    ARRADIO様の回答にあった通り、他の<div>要素に恥ずかしいくらいの凡ミスがあり、そこを修正して無事思い通りの動作を確認できました!
    aKusano様も丁寧な解説ありがとうございます。

    今後とも質問を見かけましたらよろしくお願いいたします!(#^.^#)

    キャンセル

checkベストアンサー

+1

わかったかもしれません。

HTML5部分の

    <d  iv class="nav-wrap">

dとiv間の余分なスペースを削除し、nav-wrapを有効にしてみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/17 18:08

    回答ありがとうございます!
    ご指摘の通りでした!!(^_^;)
    自分の眼を疑います。。
    コーディングの際にもう少し丁寧に見るように心がけたいと思います!

    ありがとうござました!!

    キャンセル

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

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