【CSS】ヘッダーを固定にして追従させる方法／超簡単に説明！

ここでは「position: fixed」を使用した方法について解説します。

① position: fixed

「position: fixed」を使用し固定させる

例

position: fixed;  /* 位置を固定する */
top: 0;  /* 固定する位置を指定 */
left: 0;  /* 固定する位置を指定 */

「padding-top」でヘッダー分の大きさで上に余白を取る

例

body {
        padding-top: 3em; /*ヘッダーの大きさだけ余白を取る*/
    }

固定する方法は、position: fixedを使うことが多いのですが、position: stickyを使う方法などあります。

位置調整には、position: relative; position: absolute を使った方法もあります。

図を使用して解説しているので、気になる方あわせてご参照ください！