positionプロパティを使ったレイアウト
positionプロパティを使用することで、自由なレイアウトを行うことができます。
文章が入ります。文章が入ります。文章が入ります。文章が入ります。
文章が入ります。文章が入ります。文章が入ります。文章が入ります。
<p class="position"><img src="star.png" width="50" height="47" />文章が入ります。文章が入ります。文章が入ります。文章が入ります。 文章が入ります。文章が入ります。文章が入ります。文章が入ります。 </p>
.position {
border:solid 1px #333;
background-color:#EEE;
padding:20px;
width:400px;
position:relative;
}
.position img {
position:absolute;
top: -20px;
left: -20px;
}
上記例のように画像をはみ出して表示させてたいなどの場合、
まず基準となるボックスに position:relative; と指定します。
そしてずらしたい要素に対して position:absolute; と指定し、
基準からどれだけずらか値をtop、leftなどで指定していきます。
※なおpositionプロパティは使い方によっては大幅に崩れてしまう場合があるので、
大枠のレイアウトを行う場合はfloatプロパティを使うことが多いです。
使いどころとしては、
- ワンポイントとして新着マークのアイコンを付けたい
- サイトのロゴをずらして配置したい
といったときに使うと良いかと思います。
