画像ブロック二つの間にアイコン(丸抜き画像)を載せる

[genepine]

画像ブロック二つの間にアイコン(丸抜き画像)を載せる

[genepine]

テーマのメインビジュアルと独自ブロックの間に丸抜き画像を載せた。*当初ブロック間に載せるつもりで作ってできたので、移した。 スマホ表示だと、アイコンの上半分がテーマのメインビジュアルの下に表示されてしまう。 テーマの初期状態で同じページを作っても再現。 テーマ側、スマホ表示の時のブロックの重なりを指定するCSSがどこかわからない。

テーマの設定 カスタマイズ>トップページ>その他 コンテンツ上の余白量 なし

構造は下記のとおり(WordPressのブロック)

htmlで同様の構造を書いたもの

    <div class="broken-grid-image-frame">
        <div>
            <h2>見出し</h2>
        </div>
        <div class="broken-middle-image-single">
            <img src="https://neogr.jp/ktwp/wp-content/uploads/2022/03/gohan-itadakimasu-circle-right.png">
        </div>
    </div>

css

<style type="text/css">
.broken-grid-image-frame {
    position: relative;
  }
  .broken-middle-image-single {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
  /* 指定しないと上にはみ出た部分がリンクにならない*/
      z-index: 10;
  }

  /*smartphone*/
  @media screen and (max-width:959px) {
      .broken-middle-image-single {
      top: 0%;
      left: 50%;
    }
  }

  /*desktop*/
  @media screen and (min-width:960px) {
      .broken-middle-image-single {
      top: -1%;
      left: 25%;
      }
  }
</style>

css の positionと z-indexが勘所。 https://developer.mozilla.org/ja/docs/Web/CSS/position

[genepine]

    /* スマホの時は元の位置に表示*/
/*  枠線表示-ブロックエディタで設定*/
    .broken-middle-image-single {
    position: relative;
    transform: translateX(0%) translateY(0%);
    padding: 2em;
    margin: 2em;
}
    .u-mb-ctrl + * {
    margin-top: 2em !important;
}
    .u-mb-0 {
    margin-bottom: 2em !important;
}
    /* スマホの時はリンク文字黒*/   
.broken-middle-image-single a{
    color:#000;
    text-decoration: none;
    }

@media screen and (min-width:960px) {
    */PCの時は枠線表示しない */
    .broken-middle-image-single {
    top: -1%;
    left: 25%;
    border: none !important;
    }
}

[genepine]

css の positionと z-indexが勘所。 https://developer.mozilla.org/ja/docs/Web/CSS/position

ソース div が別の範囲なので z-indexを指定しても対象外になる。 id="main_visual" id="content"