画像のタイトル
画像のタイトル
.title2{
....
position:relative;
top: -45px;
left: 5px;
}
画像1のタイトル
画像2のタイトル
相対配置（position：relative）では、top、bottom、left、right プロパティーを使って、本来あるべき位置から相対的な距離を指定する。
注意したいのは、top と bottom を同時に指定することはできないし、left と right を同時に指定することはできないということ。
仮に同時に指定しても、bottom よりも top が、right よりも left が優先される。（direction プロパティ（文字の表記方向）で値を rtl（right to left） にしてある場合は逆になります。）
position: relative を指定された要素は、通常フローの子供要素と、絶対配置される子孫要素用に、新しく包含ブロックを生成する。ゆえに画像1と画像2の間のアキは保持される。
↑まず、position: relative を指定した div 要素（ここでは背景囲み）は、position: abosolute 用に新しい包含ボックスを生成する。
つまり通常フロー用の包含ボックスとは別に、もうひとつの包含ボックスを作る。
その時の包含ボックスは、padding の内側ではなく、border の内側になる。
背景はrelative。画像はabosolute。画像自体は通常フローから完全に切り離されて、再配置されている状態。
そして、<h4 >以下の文字は通常フローのままだから、画像の存在を無視して上に上がっているということ。
次に
上に上がってしまった<h4>以下を下げるには、
画像のタテサイズ＋αだけ下げればいいからmargin-top:250px;を入れた。（画像は300px × 240px。）
<h4>とテキストは下がったが、
まだ、「続きを読む »」が枠内からはみ出している。
「続きを読む »」には「float:right」が適用されているため、囲み内に収まっていない。
このフロートを解除する何かがこれの後に必要になっているということ。
回避策としていろいろあるが今回は
背景囲みにclearfix:afterを施してみた。→結果OK! 収まった。
imgの位置もtop: 10px、left:10pxに修正。
これでおおまかな骨組みは出来たので、あとは微調整のみ。
絶対配置を使って あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ