z-indexが切り替わらないスタック文脈のせい？

600px以上で上部にメニューを表示し、300px以上ー600px未満で、トグルメニューを表示しています。

下記ページを参考にしました。
参考にしたページ

600px未満時、開いたトグルメニューがコンテンツの上に重なるように z-indexで値を指定しています。
※absolute-containerがtable-sec（テーブル）のコンテンツに重なる。

そして、600px以上のときには重ならないようにしたいのですが、上手くいきません。
表示すると、なぜかtable-secにabsolute-contentsが重なっている（table-secの中にabsolute-contentsが入っている？）ように表示されています。

調べると、スタック文脈というのが関係してそうですが、どうでしょうか？
スタック文脈

absolute-contents,table-secともに上には直上はbodyタグがあります。

CSS
1/* Menu */
2#menu {
3	width: 100%;
4	max-width: 1480px;
5	margin: 0 auto;
6	padding: 0;
7}
8#menu li{
9	display:inline-block;
10	margin:40px 10px 0px;
11	padding: 0;
12}
13#menu li a {
14	display:block;
15	padding: 15px 0 15px;
16	color: #FFF;
17	text-align: center;
18	text-decoration: none;
19	transition:all .3s;
20}
21#menu li a:hover{
22	color:#2D92F3;
23}
24.absolute-container {
25	background-color: #2797CD;
26}
27
28@media (min-width:300px) {
29	/* Menu */
30	#menu {
31		display: none;
32	}
33	#menu li {
34		width: 100%;
35		margin:0px 0px;
36		background-color: #00A9E8;
37	}
38	#toggle {
39		display: block;
40		position: relative;
41		width: 100%;
42		background: #2797CD;
43	}
44	#toggle a{
45		display: block;
46		position: relative;
47		padding: 20px 0 20px;
48		border-bottom: 2px solid #4baacb;
49		color:#FFF;
50		text-align: center;
51		text-decoration: none;
52	}
53	/* アイコンをCSSで表現 */
54	#toggle:before {
55		display: block;
56		content: "";
57		position: absolute;
58		top: 50%;
59		left: 10px;
60		width: 30px;
61		height: 30px;
62		margin-top: -15px;
63		background: #FFF;
64	}
65	#toggle a:before, #toggle a:after {
66		display: block;
67		content: "";
68		position: absolute;
69		top: 50%;
70		left: 10px;
71		width: 30px;
72		height: 6px;
73		background: #2a83a2;
74	}
75	#toggle a:before {
76		margin-top:-9px;
77	}
78	#toggle a:after {
79		margin-top: 3px;
80	}
81	.absolute-container {
82        z-index: 2;
83		position:absolute;
84		width:100%;
85	}
86	#menu li a:hover{
87		color:#2D92F3;
88	}
89}
90
91@media (min-width: 600px) {
92    .table-sec{
93        z-index:4;
94   }
95	#toggle {
96		display: none;
97	}
98	#menu {
99		display: block;
100	}
101	.lfloat{
102		float:left;
103	}
104	.rfloat{
105		float:right;
106	}
107	#menu li a {
108		font-size: 16px;
109	}
110	#menu li{
111		width:14%;
112		margin:40px 5px 0px;
113		background-color: transparent;
114	}
115
116}
117

HTML
1<body>
2---中略
3<div class="absolute-container">
4    <nav id="menu-box">
5     <div id="toggle"><a href="#">MENU</a></div>
6     <ul id="menu" class="">
7       <li class="lfloat"><a href="#1">メニュー</a></li>
8       <li class="lfloat"><a href="#2">前のページへ</a></li>
9       <li class="lfloat"><a href="#3">TOP</a></li>
10       <li class="rfloat"><a href="#4">一覧</a></li>
11       <li class="rfloat"><a href="#5">使い方</a></li>
12     </ul>
13   </nav>
14 </div>
15
16 <div class="section table-sec">
17  <div class="container shared-container">
18    <div class="bus-name">テーブル</div>
19    <table class="u-full-width">
20      <thead>
21        <tr>
22          <th>性別</th>
23          <th>年齢</th>
24          <th>趣味</th>
25          <th>役職</th>
26          <th>好きな言葉</th>
27        </tr>
28      </thead>
29      <tbody>
30        <tr>
31          <td>男</td>
32          <td>２３</td>
33          <td>ホッケー</td>
34          <td>会社員</td>
35          <td>一期一会</td>
36        </tr>
37        <tr>
38          <td>男</td>
39          <td>３４</td>
40          <td>食べあるき</td>
41          <td>会社員</td>
42          <td>にんげんだもの</td>
43        </tr>
44        <tr>
45          <td>女</td>
46          <td>２６</td>
47          <td>カフェめぐり</td>
48          <td>OL</td>
49          <td>Life is beautiful</td>
50        </tr>
51        <tr>
52          <td>女</td>
53          <td>１９</td>
54          <td>合コン</td>
55          <td>パリピ</td>
56          <td>うぇーい</td>
57        </tr>
58      </tbody>
59    </table>
60 </div>
61</div>
62---中略
63</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を指定すると、左のように、上部メニューまで重なってしまうので、それはせず、出てきたメニューのみを重ねたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

z-indexプロパティはpositionプロパティの値がstatic(初期値)以外に指定されていないと有効になりません。
.table-secにposition: relative;を追加して下さい。

追記
私の勘違いでした。
重なり順ではなくそもそも重ねたくないのですね。
positionプロパティの値を上書きしてあげると良いと思います。

CSS
1@media (min-width: 600px) {
2    /* 省略 */
3    .absolute-container {
4        position: relative;
5        overflow: hidden; /* floatの解除 */
6    }
7}

補足への追記
省略無しで全てのCSSを一部修正して記載しています。
なお、@media (min-width: 300)内のルールセットはメディアクエリを使う必要性を感じなかったのでメディアクエリを削除して全てまとめました。
他にも多少気になる点はありますが、この質問の本題ではないのでここでは触れません。

CSS
1/* Menu */
2.absolute-container {
3    position: relative;
4    width: 100%;
5    background-color: #2797CD;
6}
7#menu {
8    /* display: none; 確認のためにコメントアウトしています */
9    opacity: .6; /* 不透明度を60%にする */
10    /*
11     * opacity プロパティは重なりを分かりやすくするために指定しています
12     * 確認後は消して下さい
13     */
14    position: absolute; /* #menu だけ文書の流れから外す */
15    width: 100%;
16    max-width: 1480px;
17    margin: 0 auto;
18    padding: 0;
19}
20#menu li {
21    display: inline-block;
22    width: 100%;
23    margin: 0px 0px;
24    padding: 0;
25    background-color: #00A9E8;
26}
27#menu li a {
28    display: block;
29    padding: 15px 0 15px;
30    color: #FFF;
31    text-align: center;
32    text-decoration: none;
33    transition: all .3s;
34}
35#menu li a:hover {
36    color: #2D92F3;
37}
38#toggle {
39    display: block;
40    position: relative;
41    width: 100%;
42    background: #2797CD;
43}
44#toggle a {
45    display: block;
46    position: relative;
47    padding: 20px 0 20px;
48    border-bottom: 2px solid #4baacb;
49    color: #FFF;
50    text-align: center;
51    text-decoration: none;
52}
53/* アイコンをCSSで表現 */
54#toggle:before {
55    display: block;
56    content: "";
57    position: absolute;
58    top: 50%;
59    left: 10px;
60    width: 30px;
61    height: 30px;
62    margin-top: -15px;
63    background: #FFF;
64}
65#toggle a:before,
66#toggle a:after {
67    display: block;
68    content: "";
69    position: absolute;
70    top: 50%;
71    left: 10px;
72    width: 30px;
73    height: 6px;
74    background: #2a83a2;
75}
76#toggle a:before {
77    margin-top: -9px;
78}
79#toggle a:after {
80    margin-top: 3px;
81}
82
83@media (min-width: 600px) {
84    #toggle {
85        display: none;
86    }
87    #menu {
88        position: static; /* absolute を上書き */
89        opacity: 1; /* opacity を上書きして不透明度を100%にする */
90        /*
91         * opacity プロパティは重なりを分かりやすくするために指定しています
92         * 確認後は消して下さい
93         */
94    }
95    .lfloat {
96        float: left;
97    }
98    .rfloat {
99        float: right;
100    }
101    #menu li a {
102        font-size: 16px;
103    }
104    #menu li {
105        width: 14%;
106        margin: 40px 5px 0px;
107        background-color: transparent;
108    }
109    /* clearfix で float プロパティによる回り込みを解除する */
110    #menu:after {
111        display: block;
112        clear: both;
113        content: "";
114    }
115}

投稿2016/09/09 10:06

編集2016/09/12 09:03

flat

総合スコア617

masaakitsuyoshi

2016/09/12 04:58

すごいです！無事出来ました！恥ずかしながらposition absolute relativeの動きも完全には理解していなく、理屈がどうなっているのかわからないのですが、なぜこうなるのでしょうか？ overflow:hiddenはなぜ使うのでしょうか？

flat

2016/09/12 07:52

まず、position プロパティの値を relative または static(初期値) に指定した要素は "通常の文書の流れに沿った内容" になります。一枚の紙に例えると、その紙には次の様に書かれています。メニューテーブル次に、position プロパティの値を absolute または fixed に指定した要素は "通常の文書の流れから外れた内容" になります。つまり「メニュー」の部分を切り取ってしまうわけです。この切り取られた「メニュー」は付箋の様な存在になり、位置指定をした要素の中の自由な位置に表示させる事が出来ます。これらを踏まえて回答にある内容を説明すると「表示領域が600px以上のとき、切り取ったメニュー(absolute)を元に戻して通常の文書の流れに沿うようにする(relative)」という事をしているわけです。ちなみに今回は position プロパティの値を relative としていますが、top right bottom left z-index の各プロパティで位置調整などを行わないのであれば値は static で構いません。 MDN(Mozilla Developer Network)などのリファレンスにも詳しい説明があるので、こちらも覚えておくと理解の助けになります。 position - CSS | MDN - Mozilla Developer Network https://developer.mozilla.org/ja/docs/Web/CSS/position overflow: hidden; についてはその指定を外してみるとわかると思いますが、メニューが消えてテーブルのレイアウトも崩れる事が分かると思います。これはメニューのリストアイテムに指定した float プロパティによる回り込みが後の要素に適用されているからです。この回り込みを解除するために overflow: hidden; を指定しています。しかし、実際には overflow プロパティで回り込みを解除するのは止めておいた方が良いです。詳しくは「clearfix」や「float overflow」などのキーワードで検索して調べてみて下さい。 * スタック文脈については説明すると長くなるので、こちらもMDNを参照して下さいスタック文脈 - Web developer guide | MDN https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context スタック文脈の例 1 - Web developer guide | MDN https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 スタック文脈の例 2 - Web developer guide | MDN https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2

masaakitsuyoshi

2016/09/14 08:56

ご説明ありがとうございます。無事実装できました。理解力がなく、自分の中に落とし込めていないので何度も読み返させていただきます。ありがとうございました！

行動規範の内容に同意します