困っていること

overlayが他の要素に被ってしまいます。
具体的には、Mastheadの要素にオーバーレイをかけているのですが、
Aboutの機能紹介の部分までオーバーレイが被ってしまいます。

これをMastheadだけに適用させたいのですが、解決方法をご教授いただきたいです。
何卒宜しくお願い致します。

環境:
Rails6.1
Bootstrap4.5

ソースコード

HTML
1<!-- Masthead-->
2<div class="main-container overlay">
3  <div class="container px-4 px-lg-5 h-100">
4    <div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
5      <div class="col-lg-8 align-self-end">
6          <h1 class="title-text">タイトル</h1>
7          <hr class="divider" />
8      </div>
9      <div class="col-lg-8 align-self-baseline">
10          <p class="sub-text">紹介文</p>
11      </div>
12    </div>
13  </div>
14</div>
15
16<!-- About-->
17<section class="page-section content-list" id="about">
18  <div class="container px-4 px-lg-5">
19    <div class="row gx-4 gx-lg-5 justify-content-center">
20        <div class="col text-center">
21            <h2 class="text-white mt-0 py-5">機能紹介</h2>
22        </div>
23    </div>
24  </div>
25</section>

CSS
1.page-section {
2  background-color: #002550;
3  height: 800px;
4  width: 100%;
5}
6
7.main-container {
8  background-image: image-url('背景画像');
9  height: 800px;
10  width: 100%;
11  background-size: cover;
12}
13
14.overlay:before {
15    position: absolute;
16    content: "";
17    left: 0;
18    bottom: 0;
19    right: 0;
20    top: 0;
21    background: rgba(0, 0, 0, 0.4);
22}

行動規範の内容に同意します

回答1件

ベストアンサー

無理やりheight をつける、、、というのは
ご期待に沿う内容ではありませんかね・・・？

css
1.overlay:before {
2    position: absolute;
3    content: "";
4    left: 0;
5    bottom: 0;
6    right: 0;
7    top: 0;
8    background: rgba(0, 0, 0, 0.4);
9    height: 800px; /* height を追加 */
10}