<div>要素を重ねて表示する

Question

下記の画像の様に

水色の背景を画像の上に
少し重ねて表示する方法を教えていただきたいです。

<section class="features">
      <section>
        <div class="pic">
          <img src="http://demo.themegraphy.com/write-ja/wp-content/uploads/sites/14/2018/06/cropped-nicole-honeywill-730102-unsplash.jpg">
        </div>
        <div class="info">
					<div class="item-title">
						<span>TITLE</span>
						<p>タイトル</p>
					</div>
					<div class="sub-title">
						<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
				</div>
        </div>
      </section>

      <section>
        <div class="pic">
          <img src="http://demo.themegraphy.com/write-ja/wp-content/uploads/sites/14/2018/06/cropped-nicole-honeywill-730102-unsplash.jpg">
        </div>
        <div class="info">
					<div class="item-title">
						<span>TITLE</span>
						<p>タイトル</p>
					</div>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </section>
  </section>

.features section{margin-bottom: 50px;}

.features section {
  display: flex;
  justify-content: space-between;
}

.features section:nth-child(even) {
  flex-direction: row-reverse;
}

.features .pic {
  width: 100%;
}

.features .info {
  /* width: calc(50% - 32px); */
  width: calc(70%);
  /* width: 55%; */
}

.pic img {
  left: 0;
}


.sub-title{background-color: #f0fafc; padding-bottom: 250px; padding-top:130px; }
コード

よろしくお願い致します。

Answer 1

他のサイトにて教えていただき解決いたしました。

Comments

[kei344]

【質問をした後に自己解決してしまった --- ヘルプ｜teratail（テラテイル）】
https://teratail.com/help#resolve-myself
> 後から読む人のためにも、具体的な解決手順を記載してください。

[Lhankor_Mhy]

以下の理由につき、低評価します。

> teratailでは、マルチポスト※の推奨はしていません。
やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。
https://teratail.com/help#posted-otherservice