Q&A
メインとか他の部分は下にいくんですか？
###前提・実現したいこと
headerを**position: fixed;**で固定し、z-indexで上位表示したい。
【構造図】
理想的な高さの順位
①header
②index-my-information
【理想図】
###発生している問題・エラーメッセージ
**div class="heaeder"**の上に###div class="index-my-information"が重なってしまう。
###該当のソースコード
【layout/application.html.erb】★修正しました★
ruby
1<head> 2 <title>Workspace</title> 3 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 4 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 5 <%= csrf_meta_tags %> 6</head> 7<body> 8 <div class="header"> 9 <%= render 'layouts/header' %> 10 </div> 11 <p class="notice"><%= notice %></p> 12 <p class="alert"><%= alert %></p> 13<%= yield %> 14 15</body> 16</html>
【page/index.html.erb】
ruby
1 <!-- ページ左 --> 2 <aside class="index-profile"> 3 <div class="index-my-information"> ←headerの下に来るようにしたい。 4 <!-- ユーザーアイコン・ユーザー名・マイプロフィールリンク・投稿数 --> 5 <section class="user_info"> 6 <%= render 'shared/user_info' %> 7 </section> 8 <!-- 投稿数 --> 9 <div class="user-info-micropost"> 10 <span><%= link_to "投稿#{pluralize(current_user.microposts.count, "")}", current_user %></span> 11 </div> 12 </div> 13
css
1 2 3body { 4 padding-top: 60px; 5 background-color: #e9f8ea; 6} 7 8 ・ 9 ・ 10 ・ 11 12 13.header { 14 width: 100%; 15 height: 40px !important; 16 background-color: #ffffff; 17 position: fixed; 18 margin-top: -60px; 19 text-align: right; 20 padding-top: 10px; 21 box-shadow: 0 2px 3px 0 #ddd; 22 z-index: 999; 23} 24 25 26 ・ 27 ・ 28 ・ 29 30 31 32.dropmenu li ul{ ←.headerの子要素？にあたると思います。 33 list-style: none; 34 position: absolute; 35 background: #fdf9fd; 36 z-index: 9999; 37 top: 100%; 38 left: 0; 39 margin: 0; 40 padding: 0; 41} 42 ・ 43 ・ 44 ・ 45 46 47.index-profile { 48 margin-right: 1000px; 49} 50 51 52.index-my-information { 53 height: 250px; 54 background-color: white; 55 margin-top: -50px; 56 margin-left: 20px; 57 border-radius: 10px; 58 position: relative; 59 z-index: 1; 60} 61 62.user_info { 63 position: absolute; 64 top: 80px; 65 z-index: 2; 66} 67 68.user-info-micropost { 69 position: absolute; 70 top: 180px; 71 left: 20px; 72 font-size: 30px; 73 z-index: 3; 74} 75 76
###試したこと
①**div class="index-my-information"にz-indexの値を－で設定するとheaderの下に潜り込みますが、リンクが消失してしまいました。
②リンクを機能させる対策としてpointer-events: none;**をcssに書き込みましたがうまく動きませんでした。
###追加
①「.headerをbody直下に置く」とはこういうことでしょうか？
css
1body { 2 padding-top: 60px; 3 background-color: #e9f8ea; 4 .header { 5 width: 100%; 6 height: 40px !important; 7 background-color: #ffffff; 8 position: fixed; 9 margin-top: -60px; 10 text-align: right; 11 padding-top: 10px; 12 box-shadow: 0 2px 3px 0 #ddd; 13 z-index: 999; 14 } 15}
試してみましたが、結果は変わらず.headerが.index-my-informationの下に来てしまいました。。。
回答3件
0
z-indexは要素同士の親子兄弟関係が重要なので.headerと.index-my-informationの関係がどうなっているかです。
というか、.index-my-informationよりもその親要素の.index-profileですね。
z-index:999;より上のものはいるのか？
そもそもz-index:999;がちゃんと効いているのか？
ひとまずこのチェックを。
該当のソースコードは結構端折っていますか？
body直下に.headerがいます？
いなかったらコードのようにbody直下に.headerを入れてみてください。
投稿2016/11/15 13:26
総合スコア2722
CSSじゃなくてhtmlでのはなしですよ～＜body直下に.header
<body>の直下に<div class="header">を設置してみてください。
すみません！
直下とは
<body>
<div class="header>
</body>
ということでしょうか！？
であればすでに直下においてあると思います！
一応質問文に全コードを追記しました！
●z-index:999;より上のものはいるのか？
→あります。しかし、.headerの子要素？にあたるものなので関係ないのかなと思いました！
●そもそもz-index:999;がちゃんと効いているのか？
→これは効いてるかわからないです…
.headerのz-indexが聞いてないのが原因なのではないかと思ったのですが、確かめようがなく…
●.headerと.index-my-informationの関係
→これも親子関係はないと思います。兄弟関係があるのかどうか…といった感じです！
とりあえず上に被るのは.index-profileのグループであとはちゃんと下に潜り込むんですね？
.headerのz-indexが効いているかはブラウザの開発ツールで確かめられますよ～
実は.index-profile以外にも上に被る部分があります！
というか、うまく下にもぐる者は一つもないです( ;∀;)
確かめます！
0
position: absolute;を使った解決策ではありませんが、
headerのz-indexが作用する条件に気付いたので報告します。
bootstrapのグリッドをclassに置くとz-indexが作用しました。
css
1.col-md-8 { ←header部分 2 z-index: 1; 3}
投稿2016/11/27 01:10
総合スコア423
0
自己解決
.header -> position: fixed
.index-profile -> positionプロパティなし
で、実装しました。
調べたところfixedとabsoluteを希望通りに実装できる方法はないようです。
ですので、absoluteを解除し、対応しました。
投稿2016/11/16 01:21
総合スコア423
よくある構造なので、出来ない、と言うことは無いと思います。CSSの質問をされる際はRUBYではなく出力されたHTML（ブラウザで「ページのソースを表示」）を書かれたほうが解決につながると思います。
keiさん、ありがとうございます！
お返事遅れました。。。
もう一度デザインを整理する段階でソースを載せて質問したいと思います。
あなたの回答
tips
プレビュー
