ボックス要素の右下端にボタンを配置する

2010年11月05日

ボックス要素の右下にバナーやボタンなどを配置したい場合、paddingやmarginなどで間隔を空けるよりもよりよい方法があります。

HTML

1<div class="sampleBox">
2    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
3    <a href="#">
4        <img src="./banner.gif" alt="お問い合わせはこちら" />
5    </a>
6</div>

CSS

01.sampleBox {
02    border:1px solid #cccccc;
03    height: 200px;
04    position: relative;
05}
06.sampleBox img {
07    position: absolute;
08    right: 0;
09    bottom: 0;
10}

サンプルページ

position: absolute; は、基本的にページの最も端から数えて要素を配置するスタイルですが、親要素にposition: relative; を指定することで、その要素が基準点となります。

今回の例ですと、親要素であるsampleBoxにposition: relativeが指定されているため、sampleBoxの端がその基準点となります。また、そのポジションの指定にright: 0; とbottom: 0; が指定されているので、「右端から数えて0px」と「下から数えて0px」の位置に要素を配置する、という解釈になります。

要素内の文字数や画像のサイズが一定でない場合にバナーなどを配置する場合、このテクニックを使ってみてはいかがでしょうか。