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>２３</td> |
| <td>ホッケー</td> |
| <td>会社員</td> |
| <td>一期一会</td> |
| </tr> |
| <tr> |
| <td>男</td> |
| <td>３４</td> |
| <td>食べあるき</td> |
| <td>会社員</td> |
| <td>にんげんだもの</td> |
| </tr> |
| <tr> |
| <td>女</td> |
| <td>２６</td> |
| <td>カフェめぐり</td> |
| <td>OL</td> |
| <td>Life is beautiful</td> |
| </tr> |
| <tr> |
| <td>女</td> |
| <td>１９</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メニュー部分は重ならず、クリックしてでてきたリストのみをコンテンツと重なるようにしたい |
| 下記のような感じ。 |
|  |
| absolute-containerにposition:relativeを追加すると、クリックして出てきたトグルメニュー（menu li）が、tabel-secを下に押しやる感じになります。 |
|  |
| こうではなく、上画像の右側のように、table-secと、トグルメニューを重ねたいです。 |
| absolute-containerにz-indexを指定すると、左のように、上部メニューまで重なってしまうので、それはせず、出てきたメニューのみを重ねたいです。 |
