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

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

Posted at September 26,2014 12:55 AM
Tag:[CSS]

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

1.はじめに

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

HTMLマークアップ

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

完成イメージ
ある要素を別の要素を基点にして配置する

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

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

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

ある要素を別の要素を基点にして絶対配置するには、基点となる親要素に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を指定した場合のテキスト表示位置
top:0,left:0を指定した場合のテキスト表示位置

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)