CSSの修正方法を教えて下さい。


http://www.houbou-ya-phuket.com/tour/islandsafari/index.html

上記、ページですが、スライダー下部のメインメニューにカーソルを合わせて、メニューを展開すると、メニューの下部にある要素の下に、メニューが入ってしまい見えなくなってしまいます。

どのようにCSSを修正すれば良いでしょうか?

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2016/05/12 18:13:54
  • 終了:2016/05/15 21:52:08

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4326ベストアンサー獲得回数17742016/05/13 00:23:25

ポイント200pt

p7TP3-05.css に書かれている z-index: 10; を無効にするか、

.p7TP3-05 .p7TP3tabs_05 {
    position: relative;
    /* z-index: 10;             これを無効にする */
    overflow: hidden;
    zoom: 1;
    border-top: 1px solid #9CBCBC;
    border-right: 1px solid #9CBCBC;
    border-left: 1px solid #9CBCBC;
}

link タグで p7TP3-05.css を読み込んでいる所よりも後の方で、以下のスタイルを指定。

.p7TP3-05 .p7TP3tabs_05 {
    z-index: 0;
}

メニューの方で z-index を増やしても同じだと思うのですが、何故かうまくいきません (´・ω・`)

id:rouge_2008

私もさっき知りましたが、こういう事らしいです。

・ - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/z-index



auto
ボックスはローカルなスタック文脈を新たに作りません。現在のスタック文脈で作られたボックスは、親ボックスと同じスタックレベルを持ちます。
<integer>
この整数値は、現在のスタック文脈で作られたボックスのスタックレベルです。ボックスはスタックレベル 0 のローカルのスタック文脈を作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。


なので、共通の親要素のレベルをあげる(※質問のケースでは11以上にする)と解決します。

2016/05/13 16:22:26
id:rouge_2008

解決方法間違っていたので訂正します。
メニューの方を変更する場合は以下で大丈夫だと思います。

なので、共通の親要素のレベルをあげる(※質問のケースでは11以上にする)と解決します。

メニューの親要素(「.menutop-wrapper」)のレベルをあげる(※質問のケースでは11以上にする)かあるいは「z-index」指定を削除すると解決します。

2016/05/13 16:41:19
  • id:a-kuma3
    # 回答のコメントに書いちゃうと、rouge_2008 さんのコメントが折りたたまれちゃうので、こちらに。

    https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
    これを読んで、何となく分かったような気にもなったのですが、

    #menutop-wrapper に z-index を指定して、コンテンツのタブの部分に、それよりも大きい z-index を指定すると、やっぱりメニューがタブの下に潜り込みます。

    div#menutop-wrapper  z-index: 20;
    div#columns-wrapper
      div#p7TP3tabs_1  z-index: 30;

    タブの親である #columns-wrapper に位置指定や、#menutop-wrapper よりも小さい z-index を指定しても、やっぱりメニューがした。

    "stacking context" という言い方をわざわざしているから、要素の階層構造とはまた違った何かなのかなあ...

    やっぱり、よく分からんです (´・ω・`)
  • id:rouge_2008
    私もまだよく分かっていませんが、質問者さんのサイトだと説明とは違う動作に見えますね・・・
    関連ページのリンクにありますが、次のページに参考になる情報があるかもしれません。(※私は未読ですが。)

    ・CSS の z-index の理解 - CSS | MDN
    https://developer.mozilla.org/ja/docs/Web/CSS/Understanding_z_index

    ※以下、「4.スタックの文脈 : スタック文脈についての覚書」で、シンプルな例が紹介されています。
    残念ながら画像なのでソースの確認ができませんが、「DIV #3 (z-index:4)」が子要素(z-index:6の要素)も含めて丸ごと「DIV #1 (z-index:5)」の下になっています。

    ・スタック文脈 - Web developer guide | MDN
    https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context


    上記が仕様上の正しい動作だと思いますので、質問者さんのサイトの場合、他にも影響している親要素があるのかもしれません。
  • id:rouge_2008
    「div#columns-wrapper」はスタック文脈になる条件のどれにも該当しないようです。
    「z-index」を追加するだけでなく、位置指定で「relative」を指定すると想定した動作になります。(※「位置指定されていて(absolutely か relatively)、z-index 値が "auto" 以外の要素」に該当するため)

    うっかりしていて気がつきませんでした・・・
  • id:a-kuma3
    むずかしいなあ、これ。

    css プロパティの継承は、ブラウザの開発環境でたどれるようになったけれど、これは目視ですもんね。
    一から自分で作るときにはまだしも、パーツを組み合わせて作るようなときは、ちょっときついですね。
  • id:rouge_2008
    ほとんど確認しないので分からないんですが、最近何かCSS関連の新機能が追加されたんですか?
    スタック文脈の描画順位も一覧表示される機能ができるといいですね。
  • id:nobu55
    回答とコメント、本当にありがとうございます。

    やり取りのレベルが高度すぎて、どうすべきか決められないので、まずはa-kuma3さんにいただいた回答を試してみます。

    実はこのメニュー、下だけではなく、横に展開した際も右側の枠の下に潜り込んでしまいます。この点については、改めて別に質問させていただきます。どうぞよろしくお願いします。
  • id:nobu55
    .p7TP3-05 .p7TP3tabs_05 {
    position: relative;
    /* z-index: 10; これを無効にする */
    overflow: hidden;
    zoom: 1;
    border-top: 1px solid #9CBCBC;
    border-right: 1px solid #9CBCBC;
    border-left: 1px solid #9CBCBC;
    }

    上記のように、該当箇所を無効にしたのですが、何故でしょう、直りません。

    他に説明いただいた方法も試してみます。
  • id:nobu55
    .menutop-wrapper {
    background-color: #ffffff;
    border-bottom: 1px solid #000;
    box-shadow: 0px 0px 30px #999;
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 5px;
    }

    rouge_2008さんに、教えていただいたように
    z-index:11 にすると治りました。(ローカル上です。まだアップしてません。)

    これで良いのでしょうか?
  • id:rouge_2008
    はい、「.menutop-wrapper」の「z-index」を「11」以上に指定すれば大丈夫です。
    ※削除しても同様に解決しますが、子要素の重なり順を指定する必要があって指定しているのかもしれませんので、そちらの方法がいいと思います。


    ※a-kuma3さんの回答ですが、タブメニューの「z-index」指定を変更する方法は、他にも2か所ほど変更する必要があるようです。
    同じく子要素の重なり順を指定する必要があって加えたスタイルかもしれませんので、こちらの方法にする場合も、「z-index」指定は残して数値を変更するようにした方がいいと思います。

    3か所変更するのはちょっと面倒かもしれませんので、上記コメント内で出ているそれぞれの親要素の重なり順を指定する方法を試してみてください。(※タブメニューを含むコンテンツエリアの重なり順をメニューより下にします。)

    「.menutop-wrapper」は「10」のままで大丈夫です。(※変更なし)
    「.columns-wrapper」は「9」以下にして、位置指定を加えます。

    .columns-wrapper {
    position: relative;
    z-index: 9;
    }
  • id:a-kuma3
    消す方は上手く動いてないですね (´・ω・`)
    いじっているうちに、他にも書き換えたところがあったのが分からなくなっちゃったか。
    z-index を 0 にする方なら動きます。

    .p7TP3-05 .p7TP3tabs_05 {
    z-index: 0;
    }

    # まあ、rouge_2008 さんので解決してるから良いか

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません