背景画像を前面に出したいが、z-indexが効かない

Question

前提・実現したいこと

↓このページの
問題がでているサイト
↓この部分
問題の箇所
の「CELL SMOOTH 60 TRILLION」というテキストの部分の下に左の方が薄緑色、中央の薄青色の背景画像が設定されているのですが、「CELL SMOOTH 60 TRILLION」というテキストの領域で背景画像が途切れているのがわかると思います。
テキスト部分のpタグが横一杯に広がっている部分の上にその背景画像を配置したいです。

発生している問題・エラーメッセージ

z-indexですぐ解決できると思ったのですが、解決できません。
どうしても背景画像がテキストpタグの下に入り、途切れてしまいます。

該当のソースコード

<p class="mv-catch inner">CELL  SMOOTH 60  TRILLION</p>
	<div class="inner m-top-20 tr sp">
		<a href="https://airrsv.net/cs60nagoya/calendar" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/btn-calendar_sp.svg" alt="" width="25%"></a>
	</div>

	<div class="sp indexNews">
		<div class="inner">
			<table class="top-news-cat">
				<tbody>
					phpコード
				</tbody>
			</table>
		</div>
	</div>

	<section class="top-blog-link-sec">
		<div class="inner960">
			phpコード
					</div>
					<div class="tbl-flex-item2">
						<p class="pc top-blog-contents-cap">ENERGY WELLNESS COLUMN</p>
						<div class="top-blog-contents">
							<p class="top-blog-contents-p1">
								<?php the_time('Y.m.d'); ?>
							</p>
							<p class="top-blog-contents-p2">
								<?php the_title();?>
							</p>
							<p class="top-blog-contents-p3">
								<?php the_excerpt(); ?>
							</p>
							<p class="top-blog-contents-arrow">
								<a href="<?php the_permalink(); ?>">
									<img src="<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-contents-arrow-8.png" srcset="<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-contents-arrow-8.png 1x,<?php echo get_template_directory_uri(); ?>/assets/img/[e-mail] 2x" alt="矢印">
								</a>
							</p>
						</div>
					</div>
				</div>
			<?php endforeach; ?>
			<?php wp_reset_postdata(); ?>
			<div class="top-blog-more-button tc">
				<button>
					<a href="<?php echo home_url(); ?>/blog/">
						<span>記事をもっと見る</span><img src="<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-more-arrow-8.png" srcset="<?php echo get_template_directory_uri(); ?>/assets/img/top-blog-more-arrow-8.png 1x,<?php echo get_template_directory_uri(); ?>/assets/img/[e-mail] 2x" alt="">
					</a>
				</button>
			</div>
		</div>
	</section>

.top-blog-link{
    padding:50px 20px;
}
.tbl-flex-item1{
    width:454px;
    /* height:303px; */
    max-width:100%;
}
.tbl-flex-item2{
    width:560px;
    height:286px;
    max-width:100%;
}
.top-blog-img img{
    box-shadow:10px 5px 10px rgba(0,0,0,0.4);
    width:100%;
    /* height:100%; */
}
.top-blog-contents{
    padding:40px;
    box-shadow:10px 5px 10px rgba(0,0,0,0.4);
    background-color:white;
    height:230px;
}
.top-blog-contents-cap{
    font-family : "Gotham-Rounded-Medium",sans-serif;
    font-size : 11px;
    line-height : 11px;
    letter-spacing : 1.32px;
    color : #1F8ABC;
    margin-bottom:30px;
    padding-left:30px;
    padding-top:15px;
}
.top-blog-contents-p1{
    font-family :"Gotham-Book",sans-serif;
    font-size : 10px;
    line-height : 10px;
    letter-spacing : 4px;
    color : #808080;
    margin-bottom:30px;
}
.top-blog-contents-p2{
    font-family : "HiraMaru-Std-W6",sans-serif;
    font-size : 23px;
    line-height : 31.2px;
    letter-spacing : 3.07px;
    font-weight:700;
    color : #1F85B7;
    margin-bottom:15px;
}
.top-blog-contents-p3{
    font-family : "源ノ角ゴシック-Regular",sans-serif;
    font-size : 13px;
    line-height : 21px;
    letter-spacing : 1.4px;
    color : #666666;
    margin-bottom:20px;
}
.top-blog-contents-arrow{
    text-align:right;
}
.top-blog-more-button button a{
    display:inline-block;
    font-family : "源ノ角ゴシック-Regular",sans-serif;
    font-weight : bold;
    font-size : 13px;
    line-height : 13px;
    letter-spacing : 2.08px;
    color : #666666;
    border:1px solid #666666;
    padding:15px 10px 15px 20px;
}
.top-blog-more-button button a span{
    display:inline-block;
    margin-right:20px;
}
.top-blog-link-sec{
    background:url(assets/img/[e-mail]) no-repeat center;
    background-size:cover;
}

試したこと

背景画像を指定している、.top-blog-link-secというクラスにposition:relative; z-index:1;としましたが、全面に背景画像が出てくれません。

補足情報（FW/ツールのバージョンなど）

どうしたら背景画像を前面に表示できるでしょうか。わかる方いらっしゃったら教えてください。
よろしくお願いします。

Comments

[m.ts10806]

＞、phpコード等がたくさん入っていますので、ここに書くと長くなってしまうので、デベロッパーツールでコード確認していただけると嬉しいです。

画面レイアウトの問題であればブラウザに出力されたHTMLを提示するか、
改めて最小構成でコード組んだものを提示すれば良いと思います。
単にリンクだけでは宣伝とほとんど変わりません。

[shunsaku87]

すみません、コードを追記しました

Answer 1

こんばんは。

絶対配置をしてみてはいかがですか？

.mv-catch {
	position: absolute;
	margin: 5px auto 0;
	left: 0;
	right: 0;
}

Comments

[shunsaku87]

ありがとうございます。
そういう手がありましたね！
解決しました。
ありがとうございました。