「セクション(背景画像・動画)」利用し、コンテンツに配置した画像にz-indexを効かせるには

0
いいねをした人: 居ません
  • このトピックには7件の返信、3人の参加者があり、最後にm-szkにより3年、 5ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #68275
    m-szk
    閲覧者
    24

    【お使いの Snow Monkey のバージョン】バージョン: 13.1.1
    【お使いの Snow Monkey Blocks のバージョン】セクション(背景画像・動画)
    【お使いの Snow Monkey Editor のバージョン】バージョン 4.0.1
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】非公開にできるようでしたらお伝えできます。

    ### 実現したいこと

    画像の位置を指定の位置に配置したく、

    親要素に「position:relative;」

    画像に「position: absolute;」を入れ、bottom、left、など指定しています。

    ### 発生している問題

    「セクション(背景画像・動画)」を使用し、背景を画像、その中に配置した画像に位置の指定をしているのですが、「z-index」が効かず次のセクションに画像が埋もれてしまいます。

    ### 試したこと

    「セクション」ブロックでは効きました。

    「.指定したクラス名 img」に「z-index」を入れてみましたができませんでした。

    0
    いいねをした人: 居ません
    #68285
    Olein_jp
    参加者
    548

    実際のページを見ないとHTML構造などが把握できないので、なんともアドバイスし難いのですが、基本的にブラウザの開発者ツールでの確認しかないので、どのクラスにどのような要素が当たっていて、入力されたz-indexが効いていないのかをチェックしてみてください。

    それらを実際に見ないと的確なアドバイスを差し上げられないかなと思います。

    0
    いいねをした人: 居ません
    #68293
    アバター画像キタジマ タカシ
    閲覧者
    2290

    z-index は親(position が指定してある直近の先祖)が基準になるので、次のセクションに画像が埋もれてしまうのは z-index が原因ではないのかもしれません。実際のページをみてみないとなんともわからないのですが、ページを見せるのが難しいということであれば、スクリーンショットやブロックの HTML を共有してもらうなどの方法もあると思うので、ご検討いただければと思います。

    0
    いいねをした人: 居ません
    #68320
    m-szk
    閲覧者
    24

    お二方とも丁寧なご返答ありがとうございます。

    コードを添付せず、大変失礼しました。

    スクリーンショットを撮ってみたのですがこちらでお分かりになりますでしょうか?
    (よろしければこちらでURLがお分かりになるかと思います。)

    <css>

    .relative {
    position: relative;
    }

    .smb-section.summa2 {
    padding-top: 120px;
    padding-bottom: 300px;
    }

    .summa2-img {
    position: absolute;
    bottom: -350px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
    }

    .summa2-img img{
    width: 500px;
    height: auto;

    }

     

    親要素に「summa2」のクラス名を付けて
    動かしたい画像に「summa2-img」のクラス名を付けています。

     

    背景が画像ではない普通のセクションブロックでは同じCSSでうまくできているのですが、確かにHTML構造は違うのでその影響やz-indexの問題ではないのかもしれないのですね。

    0
    いいねをした人: 居ません
    #68328
    Olein_jp
    参加者
    548

    単純に親要素にposition: relative;が付いていないのが原因かと思います。

    この場合、.summa2-imgの直接の親要素は、.summa2ではなく.smb-section_bodyですね。なので、.summa2-imgに書かれているposition: absoluteは正常に動かないと思います。

    何をどうされたいのか具体的に書かれていないので、これ以上どう書くことが課題の実現に繋がるかわからないため、コードでのアドバイスは難しいです。

    また、同一のブロックでない限りHTML構造が変わることがほとんどだと思うので、まずは開発者ツールなどでHTML構造を確認された上でCSSを色々と書いてみることをお勧めします。

    手前の情報で恐縮ですが、開発者ツールの使い方などはこちらの動画などでも取り扱っているので、Snow MonkeyをCSSカスタマイズする際には、参考にしていただけるかもしれません。よろしければどうぞ!

    0
    いいねをした人: 居ません
    #68375
    m-szk
    閲覧者
    24

    参考動画のご紹介ありがとうございます!
    実はOlein_jp様の動画を少しずつ拝見しておりまして、昨日もライブ配信少しお邪魔しました。
    今後もたくさん見て勉強させていただきます。
    ありがとうございます。

    ご紹介の動画も見まして、CSSの書き方はこのようにやるのですね。

    再度書き方を変えて、親要素の部分にposition: relative;を付けてみたのですが、
    イメージする表示にはなりませんでした…

    ▼やりたい表現

     

    ▼実際の表示

    「セクション(背景画像/動画)」ブロックを使用し、そのセクションに「summa2」とクラス名を付けました。

    パッケージ写真を次のセクションの上に被る様に配置したいのですが、
    やはりposition: absoluteが効いていないのでしょうか…

    z-indexの数値を上げたり、他に効いてきているCSSを消したりしてみたのですが変わりませんでした。

    ▼HTML

    ▼CSS

    0
    いいねをした人: 居ません
    #68399
    アバター画像キタジマ タカシ
    閲覧者
    2290
    - 上のブロック
      - 画像
    - 下のブロック

    という構造になっていて、画像の z-index をあげても下のブロックとの上下関係には影響しないと思います(多分)。可能性として考えられるのは

    – 上のブロック(正確には画像を囲むいずれかの HTML タグ)に overflow: hidden がついている。
    – HTML は通常上の要素より下の要素が重なり順的に上層に表示されるので、下のブロックの z-index を上のブロックの z-index より下げてみる(上のブロックの z-index を下のブロックの z-index より上げてみる)。

    というのは試してみると良いかもしれません。

    0
    いいねをした人: 居ません
    #68407
    m-szk
    閲覧者
    24

    なるほど!
    確かに上のブロックにoverflow: hiddenがついていて、overflow: visible;に変えたらできました!
    ありがとうございました。
    トピック閉じさせていただきます。

    0
    いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「「セクション(背景画像・動画)」利用し、コンテンツに配置した画像にz-indexを効かせるには」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。