###■目的
青いボタンの位置を①②にしたいです。
①ハリネズミ画像よりも下に表示。(下とはZ軸で奥のこと)
②記事本文よりは上に表示。(同様にZ軸で手前のこと)
https://jsfiddle.net/eak8Ljme/
###■現状
現状は、上記リンク先にあるように、z-indexが効かず、目的と逆の状態です。
つまり、
CSSの4行目で(質問箇所1/2)
画像のz-indexを「11」にして、
CSSの24行目で(質問箇所2/2)
ボタンを「10」にしているのに、
なぜか…
Z軸で奥からボタンを表示させるようなCSSがお分かりになる方いらっしゃいましたらご教示いただければ幸いです。
よろしくお願いいたします。m(__)m
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/20 04:49
回答4件
0
今のままの構造ではできないんじゃないかなと思います。
.btn-pack
についてるz-index
は.content-wrap
の中におけるz軸なので。
css
1.btn-pack { 2 position: fixed; 3 z-index: -1; 4 top: 250px; 5 left: 30px; 6}
こうしてウィンドウ幅を狭くしてテキスト「ここからボタンを表示させたい」と重ねてみると分かりやすいと思いますが、ボタンがテキストの下に来ます。
.content-wrap
と#harinezumi
は同じ階層なのでz-index
が効いているということですね。
投稿2016/10/19 14:17
総合スコア2722
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/20 04:26
0
ベストアンサー
今現在、指定通りに動けば下図のようになるのは分かりますか?
上
----------------- .content-wrap(記事本文) z-index: 12
----------------- #harinezumi(ハリネズミ) z-index: 11
----------------- .btn-pack(ボタン) z-index: 10
下
この状態ですと、いくらcontent-wrapの要素をスクロールしてもbtn-packがharinezumiの上に出てくることはありません。
(実際は上記のようにすらなってないかと思います。z-index:10にしているのに上に表示されるのはそのためです。下記ご参考くださいませ。m(_ _)m)
[CSS] z-index とスタックコンテキスト
第4回 z-index再入門 1
どのみちCSSだけですと少しややこしくなる気がするので、jQueryあたりでスクロールして表示範囲内に入ったらボタンを表示、などの処理にするのはいかがでしょうか。
投稿2016/10/19 12:31
総合スコア328
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/19 14:01
退会済みユーザー
2016/10/19 15:18
退会済みユーザー
2016/10/20 04:51
0
こちらに追記いたしますね。
本業が少し立て込んじゃっていてほぼ殴り書き状態ですがご容赦くださいm(_ _)m
inview.jsを使っておりませんので、jQueryさえ読み込んであればある程度動くかと思います。
CSS
1.wrapper { 2 height: 2000px; 3 width: 100%; 4} 5 6#harinezumi { 7 position: fixed; 8 z-index: 11; 9 top: -50%; 10 left: -50%; 11 width: 200%; 12 height: 200%; 13} 14#harinezumi img { 15 position: absolute; 16 top: 0; 17 left: 0; 18 right: 0; 19 bottom: 0; 20 margin: auto; 21 min-width: 50%; 22 min-height: 50%; 23} 24.btn-pack{ 25 position: fixed; 26 top: 30px; 27 left: 30px; 28} 29.btn01 { 30 color: #fff; 31 text-decoration: none; 32 text-align: center; 33 position: relative; 34 z-index: 10; 35 display: block; 36 width: 150px; 37 height: 150px; 38} 39.btn01 span { 40 position: absolute; 41 top: 50%; 42 left: 50%; 43 transform: translate(-50%,-50%); 44 width: 120%; 45} 46.btn01::before { 47 content: ''; 48 background-color: #4285F4; 49 display: block; 50 position: absolute; 51 width: 150px; 52 height: 150px; 53 z-index: -1; 54 border-radius: 50%; 55 box-shadow: 56 0 0 0 0 rgba(51,51,51,0.3), 57 0 0 0 0 #4285F4; 58 transition: all .2s ease; 59 -webkit-transition: all .2s ease; 60} 61.btn01:hover::before { 62 transform: scale(0.8); 63 -webkit-transform: scale(0.8); 64 box-shadow: 65 0 0 0 25px rgba(255,255,255,0.3), 66 0 0 0 27px rgba(255,255,255,0.3); 67} 68.btn01:hover{ 69 color: #FFF; 70} 71.entry-header-innner { 72 position: relative; 73 z-index: 12; 74 width: 820px; 75 height: 480px; 76 margin: 0 auto; 77 padding-top: 180px; 78 position: relative; 79} 80.content-wrap { 81 position: relative; 82 z-index: 12; 83 background-color: #fff; 84} 85.content-wrap { 86 padding: 0 500%; 87 margin: 0 -500%; 88} 89.content-wrap { 90 padding: 0 30px 0 30px; 91}
Javascript
1$(function(){ 2 $(".btn-pack").hide(); 3 $(window).scroll(function () { 4 if ($(this).scrollTop() > $(".entry-header-innner").height() ) { 5 $('.btn-pack').fadeIn(); 6 } else { 7 $('.btn-pack').fadeOut(); 8 } 9 }); 10})
HTML
1<div class="wrapper"> 2 <div class="entry-header-innner"> 3 <h1 class="entry-title">記事タイトル</h1> 4 </div> 5 <div id="harinezumi"> 6 <img src="https://pbs.twimg.com/profile_images/378800000220029324/fe66faeca20115da8566e51d83447ead_400x400.jpeg" class="attachment- size- wp-post-image" alt="harinezumi" style="display: block;" height="450" width="600"> 7 </div> 8 <div class="content-wrap"> 9 <div class="entry-content"> 10 <div class="btn-pack"> 11 <a target="_blank"href="http://ganbishi.com/wp/custom-editor-css/" class="btn01"> 12 <span>ボタン</span> 13 </a> 14 </div> 15 <p style="text-align: center;">ここからボタンを表示させたい</p> 16 <p style="text-align: center;">記事本文</p> 17 <p style="text-align: center;">記事本文</p> 18 <p style="text-align: center;">記事本文</p> 19 <p style="text-align: center;">記事本文</p> 20 <p style="text-align: center;">記事本文</p> 21 <p style="text-align: center;">記事本文</p> 22 <p style="text-align: center;">記事本文</p> 23 <p style="text-align: center;">ここまでボタンを表示させたい</p> 24 </div> 25 </div> 26</div>
投稿2016/10/20 02:11
総合スコア328
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/20 04:24
2016/10/20 04:54
退会済みユーザー
2016/10/20 05:08
0
「画像の下からボタンを表示させる」というのがどういった状況かがよく分かりませんが...
.content-wrap についている z-index: 12; のせいではないでしょうか。
.content-wrap の z-index の指定を10以下にすることで、ボタンの上に画像が来ます。
投稿2016/10/19 11:07
総合スコア12
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/19 11:23
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。