potitionがよくわかりません＞＜

質問

positionがよくわかりません。

【　HTML　】
　　　<div>
　　　 <h1>携帯はひとり2台の時代へ</h1>
　　　 <h2>使い分ける人急増</h2>
　　　</div>
【　CSS　】
　　　div{
　　　 width: 500px;
　　　 height: 100px;
　　　 background-image: url("title.jpg");
　　　 background-repeat: no-repeat;
　　　}
　　　h1 {
　　　 position: absolute;
　　　 top: 28px;
　　　 left: 100px;
　　　 font-size: 30px;
　　　}
　　　h2 {
　　　 position: absolute;
　　　 top: 2px;
　　　 left: 12px;
　　　 font-size: 14px;
　　　}

ニュース番組のようなテロップ(CSSのbackground-image)に、見出し(HTMLのH1～H2)を載せていこうと考えています。これでブラウザで表示したら、文字が背景に載って大成功です。

それで、div以前にいろんな要素を配置したら、配置が崩れました＞＜。topやleftの配置はブラウザの表示領域を基準としているみたいです。divを基準にしたいのですが、どうすればよいでしょうか。

回答No.1

shimix

absoluteは「親要素を基準」ですが、これは親要素にrelativeまたはabsoluteを指定している場合のみです。それ以外の場合はウィンドウ枠が基準になります。

∴ 親要素のdivにrelativeを指定してやればいいと思います。