ヘッダーを追従させるcss

ヘッダーを追従させるcss

・position: fixedを使って位置を固定する
・ヘッダーの後ろに他の要素が回り込まないようにbodyにヘッダーの高さだけmarginを入れる

body {
  margin: 50px 0 0 0;
}

.header {
    background-color: coral;
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
}

.dummy {
    width: 250px;
    height: 250px;
    margin-bottom: 30px;
    background-color: wheat;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <div className="header">
            </div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
            <div className="dummy">dummy</div>
        </>
    )
}

結果