Q&A
表題と現在の質問内容が変わっています。表題の件についてはどういう問題で起こるかを理解されておられるようなので、ひとまずそれについてのベストアンサーを選ばれてはいかがでしょうか。
###■目的
青いボタンの位置を①②にしたいです。
①ハリネズミ画像よりも下に表示。（下とはZ軸で奥のこと）
②記事本文よりは上に表示。（同様にZ軸で手前のこと）
https://jsfiddle.net/eak8Ljme/
###■現状
現状は、上記リンク先にあるように、z-indexが効かず、目的と逆の状態です。
つまり、
CSSの４行目で（質問箇所1/2）
画像のz-indexを「11」にして、
CSSの２４行目で（質問箇所2/2）
ボタンを「10」にしているのに、
なぜか…
ボタンがハリネズミ画像の上にきてしまいます。
Z軸で奥からボタンを表示させるようなCSSがお分かりになる方いらっしゃいましたらご教示いただければ幸いです。
よろしくお願いいたします。m(__)m
仰るとおりですね☆ありがとうございます。
回答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
こんにちは。z-indexのスタックとかいうやつですしょうか。別の方のご回答で知りました。今回はこの構造のままCSSに取り組むのはあきらめて、なんとかjqueryで頑張ってみたいと思います。いつもご回答ありがとうございます(^_-)-☆
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
いつかだったか以前も、そして今日も、かなり頑張ったけど…
jqueryはさっぱりでした。笑
ありがとうございます。m(__)m
『【STEP３】の部分のコードが間違ってるよ』とエラーが出てしまいます。
なぜだかお分かりになりますでしょうか？
【STEP１】
「jQuery＆CSS3で超簡単～～」から「jquery.inview.js」をDLし、サーバーにアップしました。
【STEP２】
functions.phpには、STEP1でサーバーにアップしたファイルを読み込むように、下記を書きました。
function my_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'javascript',get_template_directory_uri().'/js/jquery.inview.js',array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
【STEP３】「jQuery＆CSS3で超簡単～～」の「ズームイン表示」を参照の上、single.phpに下記を書いてみました。
<?php
jQuery(function() {
$('.list-mv01').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if(isInView){
$(this).stop().addClass('mv01');
}
else{
$(this).stop().removeClass('mv01');
}
});
});
?>
【いざ！と思ったら】
で、冒頭のエラーです( ﾉД`)ｼｸｼｸ…
「とりあえず質問内容への回答があったらBAしなさい」とのご指摘を頂いたので、先走り気味ですが、選ばせていただきます。わかりやすいリンクを誠にありがとうございますm(__)m
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
お・お・お・おおおおお！！！動きますね。質問以上に理想としていた仕掛けでございます。本業でもさぞお優しいご提案をなさるのでしょう。よし、あとは私のwordpressにjqueryを設定するだけですね。何度も挫折しましたけれど、ここまでやって頂いたからには、逃げるわけには参りますまい(; ･`д･´)できたらお知らせいたします。お忙しい中まことにありがとうございます！
試行錯誤しているうちにいろいろできるようになると思いますよ！
頑張りましょうo^^o
いまできました！！感涙すぎて鼻づまりが治りましたよ！
はずかしいけど、じゃ~ん！
http://ganbishi.com/wp/howto-shortcode/
ずっとjavascriptのコードを<?php○○?>で囲っておりました。ではなくて、<script>○○</script>で囲むのですね！これで何日悩んでいたことか…まったく素人ってやつはとんでもない勘違いを無意識の前提のまま突っ走りますな。
テラテイルさんには賢く優しい方が多いので私の人格も鍛えられます。
ほんとうにありがとうございますm(__)m
0
「画像の下からボタンを表示させる」というのがどういった状況かがよく分かりませんが...
.content-wrap についている z-index: 12; のせいではないでしょうか。
.content-wrap の z-index の指定を10以下にすることで、ボタンの上に画像が来ます。
投稿2016/10/19 11:07
総合スコア12
画像の下とは、お察しのとおり、ｚ軸でのことです。
「下」でなく、「奥」でしたね。
＞.content-wrap の z-index の指定を10以下にする
そうするとボタンが記事本文の下にいってしまうのです…(>_<)
あなたの回答
tips
プレビュー
