【CSS】Positionのrelativeとabsoluteを用いて、画像に文字列を重ねる方法

2013/03/30

Written by: EISUKE

Category: IT

Posi html 8
サムネイル画像の上にタイトルリンクを表示させたいと思っていたのですが、今までCSSのPosition:relativeでタイトルの位置を替えても、上手くいかなくて謎でした。
そこで、今回はちゃんとした方法を学んだので紹介したいと思います。

相対位置と絶対位置

ポイントは相対位置と絶対位置でした。まぁ言葉で言うと難しいかもしれないですが、実際に考えてきには、あまり難しくないので見て行きましょう。
Posi html 6
上のようなサムネイルとタイトルがある場合を想定します。この時にタイトルを画像に重ねる場合はタイトルを上に持ってくれば良いと考えてしまいがちですが、それだけではタイトルの行数によって、どのくらい上に持ってくるかも変わってきてしまい汎用性があるません。
こういった時に使えるのが、相対位置と絶対位置であるPositionプロパティを設定してあげる方法です。

上の画像では、まず画像とタイトルをDIVタグで括ってスタイルをPosition:relative(相対位置)を設定します。その中に属するタイトルに対してはPositon:absolute(絶対位置)を設定します。

<div class='img' style="position:relative;">
<img src='*****.jpg'>
<div class='title' style="position:absolute;">タイトルだよ！タイトルだよ！タイトルだよ！タイトルだよ！タイトルだよ！タイトルだよ！</div>
</div>

ここがポイント！

このように設定する事で、relativeの中で自由にabsoluteの位置を設定することができます。
Posi html 4 1
そしたら、最後にbottom:0px(個々で調整)にしてあげれば完璧です！

<div class='img' style="position:relative;">
<img src='*****.jpg'>
<div class='title' style="position:absolute;bottom:0px;">タイトルだよ！タイトルだよ！タイトルだよ！タイトルだよ！タイトルだよ！タイトルだよ！</div>
</div>

タイトルが長くなっても、表示が崩れないのがわかります。
どうですか？理解出来たでしょうか？考え方は意外に簡単だったでないでしょうか？

MasterPeace21 こういった方法を習得したおかげで、サイドバーにあるTOP記事の表示をかっこ良く出来ました。