position:staticなヘッダー
固定ヘッダーの場合
-
position: fixed;→通常の文書フローから外れる - ビューポート（画面）を基準に配置される
- 他要素とレイアウト計算を共有しない
完成コード
ex.css
.header{
background-color: rgb(128, 128, 192);
padding:30px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
a{
text-decoration: none;
font-size:20px;
}
.container{
display: flex;
background-color: red;
justify-content: space-between;
align-items: center;
}
.logo{
flex: 0 0 auto;/*この要素のサイズを勝手に伸ばしたり縮めたりしない*/
padding: 0 20px;
background-color: brown;
text-align: center;
}
.menu{
flex:1;/*余りスペースはmenuがぜんぶもらう*/
background-color: aqua;
}
.menu ul{
margin:0;
padding:0;
display: flex;
gap: 30px;
justify-content: center;
align-items: center;
}
.menu li{
list-style: none;
}
.menu li a {
display: block;
padding:20px 30px;
border-radius: 5px;
background-color: royalblue;
}
:root {
--header-height: 130px;
}
body {
padding-top: var(--header-height);
}
.main{
width:90%;
margin :0 auto;
background-color: brown;
display: flex;
flex-direction: column;
text-align: center;
}
-
--header-height: 130px;:header-height という名前に 130px を保存 -
:root { ... }:ページ全体の親:つまりHTML全体で使える場所に置いてる -
padding-top: var(--header-height);:さっき保存した値をここに入れる
ex.ma
<body>
<header class="header">
<div class="container">
<div class="logo">
<a href="#">LOGO</a>
</div>
<nav class="menu">
<ul>
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Candy</a></li>
<li><a href="#">Dates</a></li>
<li><a href="#">Eggplant</a></li>
</ul>
</nav>
</div>
</header>
<div class="main">
<h1>a</h1>
<h1>a</h1>
<h1>a</h1>
<h1>a</h1>
<h1>a</h1>
</div>
</body>
通常はフロー内→スクロールすると固定になるヘッダー
position:sticky;にして、--header-heihgtを10pxにするだけでOK
- top: 0; に到達した瞬間headerがビューポート上端に張り付く
（fixedのように振る舞う）
