タイトルの文字の下半分から背景の色を適用させたい

Question

cssのレイアウトがうまくいかないので教えていただけると幸いです。

実現したいこと

タイトルの文字の下半分から背景の色を適用させたいです。
イメージとしては以下のようにしたいです。（タイトルがEXAM）

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

本文の要素にbackground-colorを設定して、topで位置を調整したところ、
タイトルの上に背景色が表示されます。

該当のソースコード

        <h3 class="title">会社概要</h3>
        <div class="company_data">
       　 <dl>
            　<div class="company_data_item">
            　  <dt class="color-gray">会社名</dt>
           　   <dd>株式会社あいうえお</dd>
          　  </div>
      　  </dl>
        </div>

  .title {
    position: absolute;
    z-index: 1;
  }
  .company_data {
    position: relative;
    top: -50px;
    z-index: 0;
　/* 親要素をはみ出して横幅いっぱいに背景を適用する */
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    background-color: #EDEDED;
    padding: 5rem 20%;
  }

試したこと

①参考サイトでは、before要素でbackgroundを使用し、背景の色を作ってる感じでした。
試してみたんですが、背景が設定できませんでした。

②potisionを設定せず、transform: transrateY　で位置調整をしてみたんですが、
同じようにタイトルの上にかぶってしまいました。

backgroundをずらすことはできないんでしょうか。

Answer 1

ご希望のことは、簡潔にいうと、
タイトル(<h3 class="title">)に次の要素(<div class="company_data">)の背景を重ねたいということでしょうか。

提示のコードだけなら、タイトルにはz-index: 1;が効いているので次の要素の前面に出てきますので、隠れることはないです。提示されていない部分のコードに問題があると思われます。

蛇足ですが、
次の要素を重ねる場合、position: absolute;を使うと通常フローから外れますので、他のレイアウトに影響を与えて複雑になりがちです。ネガティブマージンを使って重ねるのがシンプルかつ悪影響が少ないのでお勧めです。

  .title {
    position: relative;
    z-index: 1;
    font-size: 30px;
  }
  .company_data {
    margin-top: -15px; /* ここで重なり量を指定 */
    width:100%;
    background-color: #EDEDED;
  }