小粋空間  -  a cheap joke and a play on words site

HTML要素を別の要素を基点にしてCSSで絶対配置する方法

HTML要素を別の要素を基点にして、CSSで絶対配置する方法を紹介します。

１．はじめに

次のようなHTMLマークアップで、画像の上に「coffee」と文字を表示させたいと思います。

HTMLマークアップ

<div>
  <img src="coffee.png" />
  <div>coffee</div>
</div>

完成イメージ

また、ブラウザの幅や高さを変更してもテキスト位置が画像からずれないようにしたいです。

この場合、子のdiv要素の内容をimg要素に重なるように配置する必要がありますが、その方法が分かりません。

２．ある要素を別の要素を基点にして絶対配置する

ある要素を別の要素を基点にして絶対配置するには、基点となる親要素にposition:relativeを設定し、子要素（ターゲットの要素）にposition:absoluteを指定して親要素からの絶対位置を指定します。

さきほどのHTMLに、CSSを指定しやすいようid属性を追加します。

<div id="parent">
  <img src="coffee.png" />
  <div id="child">coffee</div>
</div>

CSSでそれぞれのid属性にpositionプロパティを設定します。さらに子要素にはtopプロパティ、leftプロパティなどで絶対位置を指定します。

#parent {
    position: relative;
    width: 250px;
    height: 166px;
    margin: 0 auto;
}
#child {
    position: absolute;
    top: 100px;
    left: 160px;
    color: #fff;
}

絶対位置の開始位置は親要素の左上になります。

参考：子要素にtop:0,left:0を指定した場合のテキスト表示位置

これでターゲットの要素は親要素を基準にした位置に配置することができます。