画像の上にテキストを配置する

Question

私はそれが絶対的および相対的な位置を含むことを知っています、私は自分自身を試してみました。私が見つけたすべてのガイドは時代遅れであるか、動作しません。

誰でも最近の/ガイドが動作していますか？

Answer 1

これは何か？

.container { 
 
    position: relative; 
 
} 
 

 
.container img { 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: #AAF; 
 
} 
 

 
.container .text { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 30px; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <div class="text">Foo Bar</div> 
 
</div>