１月20日の授業 ポジションレイアウト

ポジションレイアウトとは

（position）を使ったレイアウト方法です。

static

これは（position）に何も指定しない場合に適用される初期値です。
top や right などで位置変更はできず、タグ同士は重なり合うことのない動きをします。

absolute

親タグ要素を基準に、top や right を使ってレイアウト位置を指定することができます。
通常、深度の深いタグは前面に表示されやすいため、z-index を使って重なり順を調整することが大切です。

relative

自分が置かれている位置を基準に、「見た目だけ」を移動させる方法です。
元の場所はタグの領域として空いたままになり、見た目だけが指定した数値分ずれて表示されます。
z-index の指定もできるため、半分だけ隠れた「ひょっこりはん」的な使い方もできそうです。

fixed

これはウィンドウの枠を基準に配置されるレイアウトです。
画面をスクロールしても常に表示され続ける、トップ固定のメニューなどによく使われています。

sticky

親タグ内にいる間は、ウィンドウの端に貼り付くように動くレイアウトです。
まだ詳しく触っていないため理解は浅いですが……（笑）
例えば「トップへ戻るボタン」を持つアイコンが、スクロールに合わせて付いてきてくれるような表現ができたら可愛いな、と思っています。
そこまで理解と技術が追いつけばいいですが…。

体調不良

急に寒くなった影響か、今日は少し体調が優れません。
そのため今回は、HTMLの整形をAIちゃんにお願いすることにしました。

いつもより綺麗にまとめてくれるでしょうし、「フロムや…」みたいな間違いも無いと思います（笑）

練習問題も提示されましたが、今日は進めるだけの気力と体力が足りないぜ…。