① position: fixed
「position: fixed」を使用し固定させる
例
position: fixed; /* 位置を固定する */
top: 0; /* 固定する位置を指定 */
left: 0; /* 固定する位置を指定 */② padding-top
「padding-top」でヘッダー分の大きさで上に余白を取る
例
body {
padding-top: 3em; /*ヘッダーの大きさだけ余白を取る*/
}参考にしたサイト
ありがとうございました！
【初心者でもわかる】HTMLとCSSだけで上部固定ヘッダーを作る方法（position: fixed;）
どうも7noteです。よく見かける上部に固定されているヘッダーをHTMLとCSSだけで作る方法を解説。 まずは実際に固定ヘッダーを使っているサイトを紹介。 こんな感じで上部に固定されているヘッダーを作っていきます。 po ...
naruweb.com
コメント