画像にテキストをちょい被せ

画像の横にちょこっと文字を重ねます

position:absolute;でやりたくなるところですが、position:relative;で最小限の移動に収めるとレスポンシブ等にも柔軟に対応できるようになります。

デモはこちら

まずは普通に横並びにする

 <div class="flex">
<div>
<img src="https://photogentle.com/wp/wp-content/uploads/2024/11/名称未設定のデザイン-1.png" width="500" alt="">
</div>
<div class="right">
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
</div>

.flex{
display:flex;
align-items:center;
}
.right{
background:#fff;
padding:30px;
}

ここからちょいずらし

 .right{
background:#fff;
position:relative;
left:-100px;
padding:30px;
}

このように実現できます。ぜひお試しを！