親要素内で、子要素の位置をCSSでデザインする
親要素にposition:relative
で基準位置を作る
子要素にposition:absolute
で基準位置からの絶対値で位置を指定する
そしてtop
bottom
left
right
で具体的な位置を指定する。
↓は黄色い親要素のボックスの右上に文字を配置
HTML
<div class="sotowaku">
<div class="moji">文字</div>
</div>
CSS
.sotowaku{
width:300px;
height:300px;
background:yellow;
position:relative;
}
.moji{
position:absolute;
top:0;
right:0;
}