← クエスト一覧

クエスト15:positionで自由に配置しよう

スライド 1 / 2
コーデ
💻 コード例
実行結果
← クエスト一覧
🌐 HTML & CSS / Quest 15 / 50

クエスト15:positionで自由に配置しよう

応用 +10 XP
🏠
今回の課題
箱はこの右上みぎうえに「NEW」バッジを貼はろう!
📖 解説を見る
📌 positionってなに?

position で要素ようその配置はいちを細こまかく制御せいぎょできます。

✏️ よく使つかう値あたい:
position: relative; → 元もとの位置いちから移動いどう
position: absolute; → 親おやの中なかで自由じゆうに配置はいち
position: fixed; → 画面がめんに固定こてい(スクロールしても動うごかない)
position: sticky; → スクロールで固定こていに切きり替かわる


⚠️ ポイント:
・absolute は親おやに position: relative が必要ひつよう
・top / left / right / bottom で位置いちを指定してい
ヒントを見る
.badge に position: absolute; top: 0; right: 0; を書こう!
📄 見本
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
正解!見本と同じになりました。
次へ →
🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解 レッスンに戻る

全問正解でクエストクリア!

未挑戦

問題 1: position: fixed; bottom: 20px; right: 20px で「TOPへ」ボタンを画面右下がめんみぎしたに固定こていしよう!(自由じゆう回答かいとう)

🖼 プレビュー
実行結果
実行できたよ!
もう一度チャレンジ!
未挑戦

問題 2: カードの左上ひだりうえに「人気にんきNo.1」バッジを貼はろう!(自由じゆう回答かいとう)

🖼 プレビュー
実行結果
実行できたよ!
もう一度チャレンジ!
未挑戦

問題 3: position: relative; top: -10px; でボタンを少すこし上うえにずらしてみよう!(自由じゆう回答かいとう)

🖼 プレビュー
実行結果
実行できたよ!
もう一度チャレンジ!
コピーしました!