ポジションを使った要素の配置
知識課題
知識課題1
以下のCSSプロパティについて調査し、それぞれの役割を説明してください。
positionstaticrelativefixedabsolutesticky
実践課題
学習したpositionプロパティの特徴を実践的に理解するため、以下の要件を満たすWebページを作成してください。
実装要件
以下の要素を必ず含めること
- スクロールに応じて上部に固定されるヘッダー(
position: sticky) - 画面右下に固定表示されるページ内ナビゲーション(
position: fixed) - 親要素を基準に配置される子要素(
position: absolute) - 通常の配置から位置をずらした要素(
position: relative)