Skip to content

ポジションを使った要素の配置

知識課題

知識課題1

以下のCSSプロパティについて調査し、それぞれの役割を説明してください。

  • position
    • static
    • relative
    • fixed
    • absolute
    • sticky

実践課題

学習したpositionプロパティの特徴を実践的に理解するため、以下の要件を満たすWebページを作成してください。

実装要件

以下の要素を必ず含めること

  • スクロールに応じて上部に固定されるヘッダー(position: sticky
  • 画面右下に固定表示されるページ内ナビゲーション(position: fixed
  • 親要素を基準に配置される子要素(position: absolute
  • 通常の配置から位置をずらした要素(position: relative