【HTML/CSS】画像の上に文字など要素を重ねて表示。position: relative/absolute。
HTML/CSSはじめたての人がつまづくポイント、要素の重ね方。
通常はhtmlは縦に積まれていくので、要素同士は重なりません。
今回は「position(ポジション)」というCSSプロパティを使って要素を重ねたり、自由に配置出来る方法を図解していきます。
ではやっていきましょう。
要素を重ねて配置する時はpositionで親子関係を構築
まず重ねたい要素同士を子要素、それらを囲む要素を親要素としてそれぞれ
子要素…position: absolute;
親要素…position: relative;
をCSSで指定します。
読み方的にはabsoluteは「アブソリュート」、relativeは「リラティブ」と、ほぼローマ字読みでいいと思います。
親子関係なんで、relativeがお母ちゃん、absoluteが息子/娘たちってことで。relativeは一つなのでこの際母子家庭想定で説明します。
こうなってる息子娘らのクラスにabsoluteを指定してあげると、、
重なります。
実際には息子娘ともお母ちゃん基準で左上にピタっとくっつくので余白などなく完全に重なって下の息子やお母ちゃんは見えなくなるかと思います。お母ちゃんに高さがあればこんな感じになりますが、あくまでイメージ図です。
ここで娘にtopやright、bottom、leftなんかを指定してあげることで
「お母ちゃんの上からこれくらい下に移動したところに来てね」とか
「お母ちゃんの右端にぴたっとくっついてね」とか
親基準で上下左右へ絶対位置指定できます。
上の図では
息子にtop指定で「上からけっこう離れたところ」
さらにleft指定で「左端からちょっとだけ離れてね」
娘にright指定で「右端にピタっとくっついて」
bottom指定で「下からちょっと離れてね」
と指定した例です。
さらにz-indexというプロパティを追加することで重なりの順序を入れ替えています。
さっきまで娘が上にきてましたが、
息子に「z-index: 2;」
娘に「z-index: 1;」
とすることで息子の方が上ですよ！お兄ちゃんですよ！としています。
この数字は親要素を基準に0として数字が上のものが上になります。
マイナスも指定できますが、通常親より後ろ側へはいきません。
このあたりは調べると奥が深いですが、シンプルに画像の上に文字を重ねたいだとか、要素の右側へぴたっと寄せたい、というような時には使って慣れていきましょう。
▼CSSで何か作りたい時にササっと実現できるレシピブック。ある程度理解していれば応用も出来るので手元にあると便利な一冊です。
CSS設計完全ガイド ～詳細解説＋実践的モジュール集
▼基礎から応用までしっかり身につけたい方はこちらのベストセラー本おすすめです。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
最後までお読みいただきありがとうございました！
