positionを使いこなそう|CodeLesson(コードレッスン)|プログラミング学習サービス

入門レッスン

positionを使いこなそう

positionを使うことで、要素を自由な位置に配置したり、固定したりできます。今回のレッスンで学んで、要素を自由自在に配置できるようになりましょう。

目安:30分

スキル一覧

position: absolute

top

right

left

bottom

position: relative

inset

position: fixed

z-index

position: sticky

達成率：

0%

コンテンツの位置を絶対配置で指定しよう

position: absolute

スキル

コーディング

絶対配置の起点を指定しよう

position: relative

スキル

コーディング

コンテンツのラベルを表示しよう

position: relative

position: absolute

コーディング

モーダルウインドウを実装しよう

position: fixed

スキル

コーディング

コンテンツの重なり順を変更しよう

スキル

コーディング

カードに画像を重ねるレイアウトを実装しよう

position: absolute

コーディング

テキストの背面に画像を重ねるレイアウトを実装しよう

position: relative

position: absolute

コーディング

ヘッダーを固定しよう

position: fixed

スキル

コーディング

スクロールの途中で要素を固定しよう

position: sticky

スキル

コーディング

クイズで振り返ろう

総復習クイズ

positionを使いこなそう

10問

5分