ボックス内の好きな場所にテキストを配置したい場合は、positionを追加することで配置することができます。
今回は、positionを使ってボックス内の自由な位置にテキスト配置したいと思います。
positionの使い方
自由にテキストや画像・ボックスなどを配置したい場合、
親要素にposition: relative;を追加し、自由に配置したい要素にposition: absolute;を追加します。
例えば、ボックスの中にテキストを自由に配置したい場合、下記コードのようになります。
<div class="box">
<span class="text">自由にテキストを配置</span>
</div>.box{
width: 100%;
height: 500px;
background: #739999;
position: relative;/*親要素に記入*/
}
.text{
color: #ffffff;
position: absolute;/*自由に配置したい要素に記入*/
right: 20px;/*親要素の右から20pxに配置*/
top: 20px;/*親要素の上から20oxに配置*/
}
今回は、ボックス[横100%・縦400px]の中にテキスト[自由にテキストを配置]を親要素の上から20px、右から20pxの位置に配置するようにCSSを設定しました。
指定した場所にテキストを配置
実際にCode Penを使って出力してみました
See the Pen
Untitled by yuki (@yuki_web)
on CodePen.
このように自由にテキストを配置したい場合、親要素にposition: relative;を追加し、自由に配置したい要素にposition: absolute;を追加することでテキストを自由に配置することができます。
