ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【HTML/CSS】画像の上に文字など要素を重ねて表示。position: relative/absolute。

HTML/CSSはじめたての人がつまづくポイント、要素の重ね方。

 

まず重ねたい要素同士を子要素、それらを囲む要素を親要素としてそれぞれ

子要素…position: absolute;

親要素…position: relative;

を指定します。

 

読み方的にはabsoluteは「アブソリュート」、relativeは「リラティブ」と、ほぼローマ字読みでいいと思います。

親子関係なんで、relativeがお母ちゃん、absoluteが息子/娘たちってことで。relativeは一つなのでこの際母子家庭想定で説明します。

position: relative/absolute;親子関係

 

 

こうなってる息子娘らのクラスにabsoluteを指定してあげると、、

position:relative/absolute;親子関係、重なりの図


重なります。

実際には息子娘ともお母ちゃん基準で左上にピタっとくっつくので余白などなく完全に重なって下の息子やお母ちゃんは見えなくなるかと思います。お母ちゃんに高さがあればこんな感じになりますが、あくまでイメージ図です。

 

ここで娘にtopやright、bottom、leftなんかを指定してあげることで

「お母ちゃんの上からこれくらい下に移動したところに来てね」とか

「お母ちゃんの右端にぴたっとくっついてね」とか

親基準で上下左右へ絶対位置指定できます。

 

position:relative/absolute;親子関係、top/right/bottom/left/z-index

上の図では

息子にtop指定で「上からけっこう離れたところ」

さらにleft指定で「左端からちょっとだけ離れてね」

娘にright指定で「右端にピタっとくっついて」

bottom指定で「下からちょっと離れてね」

と指定した例です。

 

さらにz-indexというプロパティを追加することで重なりの順序を入れ替えています。

さっきまで娘が上にきてましたが、

息子に「z-index: 2;」

娘に「z-index: 1;」

とすることで息子の方が上ですよ!お兄ちゃんですよ!としています。

 

この数字は親要素を基準に0として数字が上のものが上になります。

マイナスも指定できますが、通常親より後ろ側へはいきません。

 

このあたりは調べると奥が深いですが、シンプルに画像の上に文字を重ねたいだとか、要素の右側へぴたっと寄せたい、というような時には使って慣れていきましょう。