質問編集履歴

1 ほs

masaakitsuyoshi

masaakitsuyoshi score 98

2016/09/12 14:36  投稿

z-indexが切り替わらない スタック文脈のせい?
600px以上で上部にメニューを表示し、300px以上ー600px未満で、トグルメニューを表示しています。
下記ページを参考にしました。
[参考にしたページ](http://morobrand.net/mororeco/jquery/responsive-menu/)
600px未満時、開いたトグルメニューがコンテンツの上に重なるように z-indexで値を指定しています。
※absolute-containerがtable-sec(テーブル)のコンテンツに重なる。
そして、600px以上のときには重ならないようにしたいのですが、上手くいきません。
表示すると、なぜかtable-secにabsolute-contentsが重なっている(table-secの中にabsolute-contentsが入っている?)ように表示されています。
調べると、スタック文脈というのが関係してそうですが、どうでしょうか?
[スタック文脈](https://app.codegrid.net/entry/z-index-1)
absolute-contents,table-secともに上には直上はbodyタグがあります。
```CSS
/* Menu */
#menu {
   width: 100%;
   max-width: 1480px;
   margin: 0 auto;
   padding: 0;
}
#menu li{
   display:inline-block;
   margin:40px 10px 0px;
   padding: 0;
}
#menu li a {
   display:block;
   padding: 15px 0 15px;
   color: #FFF;
   text-align: center;
   text-decoration: none;
   transition:all .3s;
}
#menu li a:hover{
   color:#2D92F3;
}
.absolute-container {
   background-color: #2797CD;
}
@media (min-width:300px) {
   /* Menu */
   #menu {
       display: none;
   }
   #menu li {
       width: 100%;
       margin:0px 0px;
       background-color: #00A9E8;
   }
   #toggle {
       display: block;
       position: relative;
       width: 100%;
       background: #2797CD;
   }
   #toggle a{
       display: block;
       position: relative;
       padding: 20px 0 20px;
       border-bottom: 2px solid #4baacb;
       color:#FFF;
       text-align: center;
       text-decoration: none;
   }
   /* アイコンをCSSで表現 */
   #toggle:before {
       display: block;
       content: "";
       position: absolute;
       top: 50%;
       left: 10px;
       width: 30px;
       height: 30px;
       margin-top: -15px;
       background: #FFF;
   }
   #toggle a:before, #toggle a:after {
       display: block;
       content: "";
       position: absolute;
       top: 50%;
       left: 10px;
       width: 30px;
       height: 6px;
       background: #2a83a2;
   }
   #toggle a:before {
       margin-top:-9px;
   }
   #toggle a:after {
       margin-top: 3px;
   }
   .absolute-container {
       z-index: 2;
       position:absolute;
       width:100%;
   }
   #menu li a:hover{
       color:#2D92F3;
   }
}
@media (min-width: 600px) {
   .table-sec{
       z-index:4;
  }
   #toggle {
       display: none;
   }
   #menu {
       display: block;
   }
   .lfloat{
       float:left;
   }
   .rfloat{
       float:right;
   }
   #menu li a {
       font-size: 16px;
   }
   #menu li{
       width:14%;
       margin:40px 5px 0px;
       background-color: transparent;
   }
}
```
```HTML
<body>
---中略
<div class="absolute-container">
   <nav id="menu-box">
    <div id="toggle"><a href="#">MENU</a></div>
    <ul id="menu" class="">
      <li class="lfloat"><a href="#1">メニュー</a></li>
      <li class="lfloat"><a href="#2">前のページへ</a></li>
      <li class="lfloat"><a href="#3">TOP</a></li>
      <li class="rfloat"><a href="#4">一覧</a></li>
      <li class="rfloat"><a href="#5">使い方</a></li>
    </ul>
  </nav>
</div>
<div class="section table-sec">
 <div class="container shared-container">
   <div class="bus-name">テーブル</div>
   <table class="u-full-width">
     <thead>
       <tr>
         <th>性別</th>
         <th>年齢</th>
         <th>趣味</th>
         <th>役職</th>
         <th>好きな言葉</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>男</td>
         <td>23</td>
         <td>ホッケー</td>
         <td>会社員</td>
         <td>一期一会</td>
       </tr>
       <tr>
         <td>男</td>
         <td>34</td>
         <td>食べあるき</td>
         <td>会社員</td>
         <td>にんげんだもの</td>
       </tr>
       <tr>
         <td>女</td>
         <td>26</td>
         <td>カフェめぐり</td>
         <td>OL</td>
         <td>Life is beautiful</td>
       </tr>
       <tr>
         <td>女</td>
         <td>19</td>
         <td>合コン</td>
         <td>パリピ</td>
         <td>うぇーい</td>
       </tr>
     </tbody>
   </table>
</div>
</div>
---中略
</body>
```
```
**補足**
無事、600px以上は※absolute-containerがtable-secが重ならないようにできました。
今度は、 600px以下のとき、absolute-containerの中の、#menu liのみをtable-secのコンテンツと重なるようにしたいのです。
toggleメニュー部分は重ならず、クリックしてでてきたリストのみをコンテンツと重なるようにしたい
下記のような感じ。
![イメージ説明](3039d6b486ed3ded371786f41383e7e9.jpeg)
absolute-containerにposition:relativeを追加すると、クリックして出てきたトグルメニュー(menu li)が、tabel-secを下に押しやる感じになります。
![イメージ説明](7b89606686d0da25749bd4de44aebcd2.jpeg)
こうではなく、上画像の右側のように、table-secと、トグルメニューを重ねたいです。
absolute-containerにz-indexを指定すると、左のように、上部メニューまで重なってしまうので、それはせず、出てきたメニューのみを重ねたいです。
  • CSS3

    5195 questions

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

  • HTML5

    9923 questions

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

  • CSSフレームワーク

    424 questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る