画像と文字を重ねる

#画像と文字を重ねる
通常、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

<div class="parent">
 <img class="child" src="./assets/icon.jpg">
</div>

style.css

.parent {
 position: relative;
}

.child {
 position: absolute;
 top: 20px;
 left: 15px;
}