画像の上に文字を重ねるには、CSSで表示位置をずらす書き方を使う

前ページに掲載した3つのサンプルのように、画像の上に文字や入力フォームなどのオブジェクトを自由な位置に重ねるには、本来の表示位置からずらすCSS(スタイルシート)の書き方を使えば簡単です。

スタイルシートを使って、重ねたい要素の配置(表示位置)をずらす。

スタイルシートを使って、重ねたい要素の配置(表示位置)をずらす。


本来は上図の左側のように「画像の下に文字が表示される」はずのところを、文字の表示位置をずらすことで、上図の右側のように「画像に重なって文字が表示される」ようにしています。

CSSのpositionプロパティで、HTMLだけの場合の表示位置からずらす

CSSのpositionプロパティを使うと、対象の要素を本来の表示位置から切り離して自由な位置に移動させられます。そのため、「文字を含む要素」の表示位置を「画像が含まれている要素」の方へずらせば、画像の上に文字を重ねて表示できます。

冒頭でご紹介した3つのサンプル(画像の上に文字を重ねた具体例)を作るソースを掲載する前に、このpositionプロパティの使い方を簡単に解説しておきます。もし、コピー&ペーストできるソースさえ見られれば十分ということであれば、以下の解説は飛ばして、3ページ目へどうぞ。

表示位置をずらす方法を指定するCSSのpositionプロパティ
positionプロパティを使って、表示位置をずらす方法を指定する。

positionプロパティを使って、表示位置をずらす方法を指定する。

表示位置をずらす役割のpositionプロパティには、以下の4種類の値を指定できます。static以外の値を指定した場合には、何らかの方法で表示位置をずらすことになります。

  • static:標準の表示 (=ずらさない)
  • relative:本来の位置から指定距離だけ移動
  • absolute:親ボックス(※)の端から、指定距離だけ移動
  • fixed:描画領域(ウインドウ)の端から、指定距離だけ移動した位置に固定 (画面をスクロールさせても動きません)
※直接の親ボックスだとは限りません。詳しくは後述します。


 
ずらす距離(位置)を指定する各種プロパティ
例えば「右上」からの距離を指定したい場合は、topプロパティとrightプロパティを使う。

例えば「右上」からの距離を指定したい場合は、topプロパティとrightプロパティを使う。

本来の表示位置からの移動距離を指定したり、絶対的な表示座標を指定したりするには、以下の4つのプロパティの内、2つを組み合わせて使います。

  • 上端からの距離を指定する、topプロパティ
  • 下端からの距離を指定する、bottomプロパティ
  • 左端からの距離を指定する、leftプロパティ
  • 右端からの距離を指定する、rightプロパティ

例えば、右上からの距離を指定したければ、topプロパティとrightプロパティの2つを使います。


 

画像の上の自由な位置に文字を重ねるために使うrelativeとabsolute

画像の上に文字を重ねるためには、CSSのpositionプロパティの値として「relative」か、または「absolute」のどちらかを使います。これらの値を指定した場合の表示効果を以下に紹介しておきます。

相対位置にずらすCSS「position: relative」
positionプロパティに値「relative」を指定すると、本来表示される位置から相対的に指定距離だけ移動した位置に表示をずらせます。
position: relative;
top: 5px;
left: 5px;
本来の表示位置を基準に移動

本来の表示位置を基準に移動

上記のように指定すると、対象の要素を「本来表示される位置」から、「左上を基準にして、上端から5px・左端から5px」ほど移動した距離に表示します。図のように、文中の特定の文字をずらすこともできます。


 
絶対位置にずらすCSS「position: absolute」
positionプロパティに値「absolute」を指定すると、親ボックス(※)の端を基準にして、指定距離だけ移動した位置に表示できます。
position: absolute;
top: 5px;
left: 5px;
親ボックスの端を基準に移動 (※本文中にあるはずの「ずらす」という文字が、本来の表示位置から離れ、親ボックスの左上を基準にした絶対位置に再配置されています。2つの「ずらす」の文字が同じ場所に重なっています。)

親ボックスの端を基準に移動。 ※本文中にあるはずの「ずらす」という文字が、本来の表示位置から離れ、親ボックスの左上を基準にした絶対位置に再配置されています。2つの「ずらす」の文字が同じ場所に重なっています。

上記のように指定すると、対象の要素を含んでいる親ボックス(※)の端を基準にして、「親ボックスの上端から5px・左端から5px」の位置に表示します。元々表示されるはずだった空間には何も表示されなくなり、後続の要素が詰めて表示されます。

※絶対配置の基準(親ボックス)について
これまでの解説では簡単に「親ボックス」とだけ記しましたが、絶対配置の基準になる「親ボックス」は、正確には「positionプロパティにstatic以外の値が指定されている祖先要素」のことです。この条件に合致する要素が存在する場合は、そこが絶対配置の基準になります。「親ボックスの親ボックス」など、複数の祖先要素が条件に該当する場合には、最も近い祖先要素が基準になります。もし、どの要素も条件に該当しない場合は、描画領域(ウインドウ)の端が基準になります。


 
さて、以上でCSSのpositionプロパティを使って表示位置をずらす仕組みの説明は終わりです。これらを踏まえた上で次のページでは、1ページ目に掲載したサンプルのように画像の上に文字を重ねる表示を実現するHTML+CSSソースをご紹介いたします。