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

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

ただいまの
回答率

88.91%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,091

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

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

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

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

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

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

/* 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;
    }

}
<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メニュー部分は重ならず、クリックしてでてきたリストのみをコンテンツと重なるようにしたい
下記のような感じ。
イメージ説明

absolute-containerにposition:relativeを追加すると、クリックして出てきたトグルメニュー(menu li)が、tabel-secを下に押しやる感じになります。
イメージ説明

こうではなく、上画像の右側のように、table-secと、トグルメニューを重ねたいです。
absolute-containerにz-indexを指定すると、左のように、上部メニューまで重なってしまうので、それはせず、出てきたメニューのみを重ねたいです。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

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

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

@media (min-width: 600px) {
    /* 省略 */
    .absolute-container {
        position: relative;
        overflow: hidden; /* floatの解除 */
    }
}

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

/* Menu */
.absolute-container {
    position: relative;
    width: 100%;
    background-color: #2797CD;
}
#menu {
    /* display: none; 確認のためにコメントアウトしています */
    opacity: .6; /* 不透明度を60%にする */
    /*
     * opacity プロパティは重なりを分かりやすくするために指定しています
     * 確認後は消して下さい
     */
    position: absolute; /* #menu だけ文書の流れから外す */
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0;
}
#menu li {
    display: inline-block;
    width: 100%;
    margin: 0px 0px;
    padding: 0;
    background-color: #00A9E8;
}
#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;
}
#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;
}

@media (min-width: 600px) {
    #toggle {
        display: none;
    }
    #menu {
        position: static; /* absolute を上書き */
        opacity: 1; /* opacity を上書きして不透明度を100%にする */
        /*
         * opacity プロパティは重なりを分かりやすくするために指定しています
         * 確認後は消して下さい
         */
    }
    .lfloat {
        float: left;
    }
    .rfloat {
        float: right;
    }
    #menu li a {
        font-size: 16px;
    }
    #menu li {
        width: 14%;
        margin: 40px 5px 0px;
        background-color: transparent;
    }
    /* clearfix で float プロパティによる回り込みを解除する */
    #menu:after {
        display: block;
        clear: both;
        content: "";
    }
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/09/12 13:58

    すごいです!無事出来ました!

    恥ずかしながらposition absolute relativeの動きも完全には理解していなく、理屈がどうなっているのかわからないのですが、なぜこうなるのでしょうか?
    overflow:hiddenはなぜ使うのでしょうか?

    キャンセル

  • 2016/09/12 16: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

    キャンセル

  • 2016/09/14 17:56

    ご説明ありがとうございます。
    無事実装できました。

    理解力がなく、自分の中に落とし込めていないので何度も読み返させていただきます。

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

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る