Tomo回答ポイント 200ptウォッチ

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

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

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32016/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 を増やしても同じだと思うのですが、何故かうまくいきません　(´・ω・｀)

  スター

  • 

    2件のコメントを見る

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

    私もさっき知りましたが、こういう事らしいです。
    
    ・ - CSS | MDN
    https://developer.mozilla.org/ja/docs/Web/CSS/z-index

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

    
    

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

    スター

  • rouge_2008 2016/05/13 16:41:19

    解決方法間違っていたので訂正します。
    メニューの方を変更する場合は以下で大丈夫だと思います。
    
    なので、共通の親要素のレベルをあげる(※質問のケースでは11以上にする)と解決します。
    
    メニューの親要素(「.menutop-wrapper」)のレベルをあげる(※質問のケースでは11以上にする)かあるいは「z-index」指定を削除すると解決します。

    スター

その他の回答

この質問へのコメント

• a-kuma32016/05/13 18:24:31
  ＃ 回答のコメントに書いちゃうと、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" という言い方をわざわざしているから、要素の階層構造とはまた違った何かなのかなあ...
  
  やっぱり、よく分からんです　(´・ω・｀)
  
• rouge_20082016/05/13 21:52:54
  私もまだよく分かっていませんが、質問者さんのサイトだと説明とは違う動作に見えますね・・・
  関連ページのリンクにありますが、次のページに参考になる情報があるかもしれません。(※私は未読ですが。)
  
  ・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
  
  
  上記が仕様上の正しい動作だと思いますので、質問者さんのサイトの場合、他にも影響している親要素があるのかもしれません。
• rouge_20082016/05/13 23:26:24
  「div#columns-wrapper」はスタック文脈になる条件のどれにも該当しないようです。
  「z-index」を追加するだけでなく、位置指定で「relative」を指定すると想定した動作になります。(※「位置指定されていて（absolutely か relatively）、z-index 値が "auto" 以外の要素」に該当するため)
  
  うっかりしていて気がつきませんでした・・・
• a-kuma32016/05/13 23:46:54
  むずかしいなあ、これ。
  
  css プロパティの継承は、ブラウザの開発環境でたどれるようになったけれど、これは目視ですもんね。
  一から自分で作るときにはまだしも、パーツを組み合わせて作るようなときは、ちょっときついですね。
• rouge_20082016/05/14 21:49:36
  ほとんど確認しないので分からないんですが、最近何かCSS関連の新機能が追加されたんですか？
  スタック文脈の描画順位も一覧表示される機能ができるといいですね。
• Tomo2016/05/14 21:59:08
  回答とコメント、本当にありがとうございます。
  
  やり取りのレベルが高度すぎて、どうすべきか決められないので、まずはa-kuma3さんにいただいた回答を試してみます。
  
  実はこのメニュー、下だけではなく、横に展開した際も右側の枠の下に潜り込んでしまいます。この点については、改めて別に質問させていただきます。どうぞよろしくお願いします。
• Tomo2016/05/14 22:23:03
  .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;
  }
  
  上記のように、該当箇所を無効にしたのですが、何故でしょう、直りません。
  
  他に説明いただいた方法も試してみます。
• Tomo2016/05/14 22:30:34
  .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　にすると治りました。（ローカル上です。まだアップしてません。）
  
  これで良いのでしょうか？
• rouge_20082016/05/15 01:01:43
  はい、「.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;
  }
• a-kuma32016/05/15 10:58:25
  消す方は上手く動いてないですね　(´・ω・｀)
  いじっているうちに、他にも書き換えたところがあったのが分からなくなっちゃったか。
  z-index を 0 にする方なら動きます。
  
  .p7TP3-05 .p7TP3tabs_05 {
  z-index: 0;
  }
  
  ＃ まあ、rouge_2008 さんので解決してるから良いか

質問の情報

登録日時

2016-05-12 18:13:54

終了日時

2016-05-15 21:52:08

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者111日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者111日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者15時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者115時間前
• 内定してほしいポケモンはいますか？匿名質問者16時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ