画像と文字を重ねる
通常、HTMLでは要素同士が重なって表示されることはありません。
しかし、CSSを用いることで要素同士を重ねることができます。
position: absolute;
HTMLの要素同士は通常重なって表示されることはありませんが、position: absolute;を使うと、要素同士を重ねて表示することが出来ます。
サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定します。また、rightやbottomを併用することも可能です。
style.css
.box1{position:absolute;top:50px;left:70px}.box2{position:absolute;top:120px;left:140px;}基準位置の変更
position: absolute;の基準位置はサイト全体の左上部分ですが、この基準位置は変更することが出来ます。
基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となります。
index.html
<divclass="parent"><imgclass="child"src="./assets/icon.jpg"></div>style.css
.parent{position:relative;}.child{position:absolute;top:20px;left:15px;}