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

Question

下記のコードでモーダル画面作成を試みているのですが、モーダルのコンテンツ画面が前面に出てこず、オーバレイが全面にでてきてしまっています。
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>

Comments

[kei344]

HTMLも追記ください。また、コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[t.kawaji]

#menu ul li:nth-child(3) {/*SNSボタン部分*/
の前にあるxは単に転記ミスですよね？

[KandM]

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

[t.kawaji]

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

[KandM]

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

Answer 1

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

Comments

[KandM]

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

[aKusano]

掲載されている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コードも記載してみてください。
原因が分かるかもしれません。

[KandM]

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

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

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

Answer 2

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

HTML5部分の

<d  iv class="nav-wrap">

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

Comments

[KandM]

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

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