[いとすりょう]

「セクション（背景画像・動画）」の中に配置した画像をpositionプロパティで位置をセクションからはみ出すように指定しているのですが、「z-index」や「overflow: visible」が効かず次のセクションに画像が隠れてしまいます。他に考えられる原因はありますでしょうか。

 

こちらのリンク先の「サロン予約はこちらから」というボタンです。
https://mimi-hair.jp/

 

♥ 0

Who liked: No user

[キタジマ タカシ]

Snow Monkey ではブロックエディターの仕様と同じになるようにフロントでも各ブロックに対して position: relative があたっています。そのため後続の要素のほうが上になるように重なります。画像自体に z-index を設定するのではなく、ブロックに対して z-index を適用するようにしてみてください。

♥ 1

Who liked:

[まーちゅう]

こんにちは。

.wp-block-snow-monkey-blocks-section-with-bgimage.alignfull.smb-section.smb-section-with-bgimage.smb-section--left.smb-section--fit {
    height: 96vw;
    overflow: visible;
}

にすると「サロン予約はこちら」のボタン画像が表示されます。
z-index が効かなかったのは、単純にボタンが領域からはみ出してるからですね。

・セクションに top-view などの適当なクラスを設定
・「サロン予約はこちら」のボタンの右寄せを解除、reservation-btn のような class を設定

上記のように変更したうえで

/* トップビューを拡大 */
.wp-block-snow-monkey-blocks-section-with-bgimage.alignfull.smb-section.smb-section-with-bgimage.smb-section--left.smb-section--fit{
    height: 96vw;
}
.wp-image-580 {
    position: absolute;
    top: 250px;
    right: 90px;
}

を削除

.top-view .smb-section__body {
    min-height: 96vw;
}
.reservation-btn {
	position: absolute;
	bottom: 3rem;
	right: 90px;
}

みたいな感じでどうでしょうか？
「サロン予約はこちら」のボタン画像の位置とサイズは、メディアクエリーで微調整してください。

♥ 3

Who liked:

[いとすりょう]

解決いたしました！

お二方ありがとうございました！

♥ 2

Who liked:

[キタジマ タカシ]

解決した場合はトピックを閉じていただけると助かります。今回はこちらで閉じますね。

♥ 0

Who liked: No user

[投稿者]

投稿