位置をずらして重ねる

01 / 06

書いた順に並ぶのが基本

ここまで作ってきた箱は、みんな書いた順に上から下へ並んでいた。この並び方を流れと呼ぶよ。

「ここだけ少しずらしたい」「絵の上に重ねたい」——そういうときは position を使う。

02 / 06

position: relative; を書いて top や left を足すと、もともと居た場所を基準にずれる。

面白いのは、元の場所はそのまま空けたままだということ。まわりの箱は動かないよ。

.mark {  position: relative;  top: 8px;  left: 12px;}

03 / 06

position: absolute; にすると、その要素は流れから抜けて浮く。空けていた場所もなくなるので、まわりの箱がつめてくる。

浮いた要素は top left right bottom で好きな場所に置けるよ。

.badge {  position: absolute;  top: 12px;  right: 16px;}

04 / 06

absolute の位置は「どこから 12px なのか」を決める基準が必要。基準になるのは、position を持ついちばん近い親だよ。

だから2つはセットで書く。親に relative、子に absolute。これがいちばんよく使う形。

.card {  position: relative;}.badge {  position: absolute;  top: 12px;  right: 16px;}

05 / 06

要素が重なったとき、どちらが手前に出るかは z-index（重ね順）で決められる。数字が大きいほど手前だよ。

z-index は position を指定した要素にだけ効く。セットで書こう。

.label {  position: absolute;  z-index: 2;}

06 / 06

浮かせた要素は他の要素を押しのけないので、文字の上に重なって読めなくなることがある。

プレビューで必ず目で確かめよう。おかしくなっても、数字を戻せばいいだけだよ。ここから書いてみよう。