Positionレイアウト練習①

概要

コードを編集し、以下の画像のようなレイアウトを作成してください。
HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。
style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等を追記してください。

positionのCSS指定で配置してください。

目標となる画像

ポジションによる絶対配置レイアウトができるようになる。

positionは、通常のレイアウトから要素をずらしたり、画像の上に文字やアイコンを重ねたりするときに使います。ページ全体の横並びや、文章・カードを順番に並べる基本レイアウトは、FlexboxやGridを先に検討してください。

この課題では、外側のボックスを基準にして、内側の要素を座標で配置する練習をします。基準にする親要素へposition: relative;、動かす子要素へposition: absolute;を指定します。

<div class="card">
  <img src="image.jpg" alt="">
  <p class="label">NEW</p>
</div>

.card {
  position: relative;
}

.label {
  position: absolute;
  top: 16px;
  right: 16px;
}

topとrightは、基準となる親要素の上端・右端からの距離です。親にposition: relative;がない場合、意図したボックスではなく、別の祖先要素や画面全体を基準に配置されることがあります。

目標画像で重なっている部分を探します。 画像上の文字や角に置かれた装飾など、通常の並び方だけでは作りにくい箇所を確認します。
基準となる親要素を決めます。 動かす要素を直接包んでいるボックスを確認し、親にposition: relative;を指定します。
動かす子要素を絶対配置します。 子要素にposition: absolute;を指定し、まずtopとleft、またはtopとrightの2方向だけで位置を調整します。
親要素の境界を見えるようにします。 一時的にoutline: 2px solid red;を加えると、どの箱を基準にしているか確認できます。
画面幅を変えて確認します。 ブラウザーの幅を狭くしても装飾が親要素から外れないか、ほかの文章と不自然に重ならないかを確認します。

親要素へposition: relative;を書き忘れる： 子要素の配置基準が想定と変わり、ページの端へ移動する原因になります。
ページ全体をposition: absolute;で組む： 絶対配置された要素は通常フローから外れるため、文章量や画面幅が変わると重なりやすくなります。
上下左右をすべて指定する： 幅や高さまで意図せず変わる場合があります。最初は縦1方向・横1方向の組み合わせで調整します。
数値だけを繰り返し変更する： 位置が合わないときは、先に親子関係と配置基準を開発者ツールで確認しましょう。