演習課題「positionプロパティにrelativeを指定してみよう」
現在、ブラウザでは、static、relativeと書かれた2つの正方形が表示されています。これらにはそれぞれstatic_box、relative_boxというクラス属性が指定されています。
ここで、relative_boxクラスのpositionプロパティにrelativeを指定してください。
さらに、topプロパティ、leftプロパティを使用して、正方形の位置を本来の位置から下に20px、右に30px移動させてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「positionプロパティにabsoluteを指定してみよう」
現在、ブラウザでは、static、relative、absoluteと書かれた3つの正方形が表示されています。これらにはそれぞれstatic_box、relative_box、absolute_boxというクラス属性が指定されています。さらに、absolute_boxクラスはrelative_boxクラスの子要素として指定されています。
ここで、absolute_boxクラスのpositionプロパティにabsoluteを指定してください。
さらに、absolute_boxクラス内でtopプロパティ、leftプロパティを使用して、relative_boxを基準として下に20px、右に30px移動させてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「positionプロパティにfixedを指定してみよう」
現在、ブラウザでは、static、relative、absolute、fixedと書かれた4つの正方形が表示されています。これらにはそれぞれstatic_box、relative_box、absolute_box、fixed_boxというクラス属性が指定されています。
ここで、fixed_boxクラスのpositionプロパティにfixedを指定してください。さらに、その状態でブラウザをスクロールした場合の挙動を確認してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃07:ポジションボックス(position)
このチャプターでは、ポジションボックスを学習します。
CSSのpositionプロパティは、要素の配置方法を指定し、文書の通常のフローからどのように扱うかを定義します。top, right, bottom, leftプロパティと組み合わせて、要素の位置を精密に制御できます。
主な値は以下の通りです。
・static: デフォルト値。要素は通常の文書フローに従って配置されます。top, right, bottom, left, z-indexプロパティは効果がありません。
・relative: 要素は通常の文書フローに従って配置されますが、top, right, bottom, leftの値に基づいて、本来の位置から相対的に移動させることができます。他の要素のレイアウトには影響を与えません（元のスペースは確保されたまま）。
・absolute: 要素は通常の文書フローから完全に取り除かれ、最も近いpositionがstatic以外である祖先要素（配置コンテキスト）を基準に位置が決定されます。そのような祖先要素がない場合は、初期包含ブロック（通常はビューポート）が基準となります。
・fixed: 要素は通常の文書フローから完全に取り除かれ、ビューポートを基準に位置が決定されます。スクロールしても位置は固定されたままです。positionプロパティは、レイアウトの微調整、オーバーレイ要素の作成、固定ヘッダー/フッターの実装などに広く使用されます。
.box {
height: 50px;
background-color: #00ff00;
position: relative;
}
.box_sub {
color: #ff0000;
position: static;
top: 10px;
left: 10px;
}
.box {
height: 50px;
background-color: #00ff00;
position: relative;
}
.box_sub {
color: #ff0000;
position: relative;
top: 10px;
left: 10px;
}
.box {
height: 50px;
background-color: #00ff00;
position: relative;
}
.box_sub {
color: #ff0000;
position: absolute;
top: 10px;
left: 10px;
}
.box {
height: 50px;
background-color: #00ff00;
position: relative;
}
.box_sub {
color: #ff0000;
position: fixed;
top: 10px;
left: 10px;
}
MDN web docs - position
https://developer.mozilla.org/ja/docs/Web/CSS/position