見た目だけ動かすと隣の位置は？relative・transform・marginを比べよう

ボタンを少し右へ動かしたら、隣の文字まで動いた。反対に、見た目だけ動いて隣の箱と重なったことはないかな。同じ距離の指定でも、配置へ与える影響が違うよ。

今回は横並びの二つの箱で、relative、transform、marginを比べる。必要なのはブラウザだけ。記事下の作例は、架空の箱の表示を切り替えるもので、保存や通信はしない。

relativeは、元の場所を残して表示位置をずらす

.target {
  position: relative;
  left: 24px;
}

position: relativeの要素は、通常の配置で確保された場所を残したまま、leftなどで表示位置をずらせる。隣の箱は、移動後の見た目を避けて自動的に右へ押されるわけではないんだ。

作例は左の箱だけを右へ24px動かす。隣の箱の位置が変わらないため、表示が重なることもある。「移動できた」だけで完成とせず、周囲も確認しよう。

transformも通常の配置を押し広げない

.target {
  transform: translateX(24px);
}

translateXは、横方向の変換を指定する関数。今回の条件では、これも元の配置場所を変えずに表示を右へ移す。隣の箱は動かないよ。

ただしrelativeとtransformは、重なり方や子要素の座標の扱いまで同じ機能ではない。transformには積み重ねコンテキストを作るなどの効果もある。今回は「左の箱の表示」と「隣の箱の位置」に絞って比べよう。

marginを増やすと、配置の間隔にも影響する

.target {
  margin-left: 24px;
}

margin-leftは外側の余白。作例の固定幅の横並びでは、左の箱の前に24pxを足すと、左の箱だけでなく、その後ろの箱も右へ移る。

この結果は、作例の横並び条件での確認。幅の自動調整や折り返しがあるレイアウトまで、常に同じ位置関係になるという意味ではないよ。

作例の数値と隣の箱を見よう

1. 「移動なし」を選び、二つの箱の位置を確認する。
2. relativeを選ぶ。左の箱は動くが、隣の箱の位置は変わらない。
3. transformを選び、同じ観点で比べる。
4. marginを選び、隣の箱も24px動くことを確認する。
5. 「最初から試す」で移動なしへ戻す。

作例は、基準の状態に対する表示位置の差を測る。狭い画面では作例の枠内を横にスクロールできるけれど、ページ全体は広げない作りだよ。

クリック領域や小さい画面も確認する

見た目が重なると、文字が読めても別の要素を押しづらくなることがある。移動後の重なり、フォーカス表示、拡大時の折り返しも見ると確認しやすい。

編集部ではChromiumで三つの指定、隣の箱の変位、リセットとスマホ幅を確認した。余白の作り分けはgapとmargin、重なり以外の見た目と順序の違いはorderと読む順番も参照してね。