【CSS】１ページに複数箇所で要素と画像を被せるデザイン

    <div class="problem_area">
      <div class="problem_image">
        <%= image_tag 'problem_image.jpg', size: '525x345', alt: 'problem' %>
      </div>
      <div class="problem_content">
        <h4>Problem</h4>
        <p>
        あなたの周りに仕事を楽しんでいる人はどれくらいいますか？<br>
        世界全体で見たときに日本の仕事の生産性はどの位置にありますか？<br>
        なぜこんなにも仕事を楽しめず、生産性も低いのか？<br>
        こんな問題を解決します！
        </p>
      </div>
    </div>

    <div class="why_area">
      <div class="why_image">
        <%= image_tag 'why_image.jpg', size: '525x345', alt: 'why' %>
      </div>
      <div class="why_content"> 
        <h4>why</h4>
        <p>
        生産性をあげられれば...<br>
        ・雑務を減らし、付加価値の高い仕事に専念できる<br>
        ・労働時間が減りプライベートの時間が増える<br>
        ・収入UP<br>
        日々の生活が楽しく幸せに！
        </p>
      </div>
    </div>

.problem_area{
  position: relative;
  height: 345px;
}

.problem_image {
  display:block;
  float: right;
}

.problem_content {
  position: absolute;
  margin: 100px 30px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.829);
}

.why_area {
  position: relative;
  height: 345px;
}

.why_image {
  display:block;
  float: left;
}

.why_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(10%);
  padding: 10px;
  background: rgba(255, 255, 255, 0.829);
}