ヘッダーに「position:fixed;」を指定し、ヘッダーを固定したものの
その次の文字や領域がそのヘッダーの下に潜り込んでしまうのですね。
では「position」のおさらいから入ります。
positionには「relative」「absolute」「fixed」「sticky」と4つあります。
今回はよく使う3つをご紹介します。
「sticky」は、少し難易度が高いので、別記事で説明していますので、以下リンクよりお越しください。


position:relativeとは
「relative」は本来あるべき位置を基準点とします。
縦横100pxの領域(div)を二つ並べてみます。
今回はわかりやすいように1つ目に赤色、2つ目に青色を付与します
コードは以下です。
<div id="relative1"></div>
<div id="relative2"></div>
<style>
#relative1{
position:relative;
height:100px;
width:100px;
background-color:red;
}
#relative2{
position:relative;
height:100px;
width:100px;
background-color:blue;
}
</style>
このように1番目の赤の領域に対して、2番目の青の領域は後ろにぺったりと並びます。
(marginや paddingを指定している場合が少し空間が空いてしまいます。)
これが彼らの本来いるべき場所です。
さてこの二つの領域に{left:100px;}を加えてみましょう。
<div id="relative1">本来位置</div>
<div id="relative2">移動後</div>
<style>
#relative1{
position:relative;
height:100px;
width:100px;
background-color:red;
left:100px;
}
#relative2{
position:relative;
height:100px;
width:100px;
background-color:blue;
left:100px;
}
</style>
position:absoluteとは
次は「absolute」です。
先ほどと似たように記していきます。
<div id="absolute1">本来位置</div>
<div id="absolute2">移動後</div>
<style>
#absolute1{
position:absolute;
height:100px;
width:100px;
background-color:red;
}
#absolute2{
position:absolute;
height:100px;
width:100px;
background-color:blue;
}
</style>
あれ??紫がひとつ・・・
つまりあれですね、術式順転「赫」・術式反転「蒼」・・・虚式「茈」
はい・・・・・・・・・・・・・・・・・(呪術廻戦、五条悟の技でした。)
でもあながち間違ってなくて、二つがひとつになっちゃったんです!
「absolute」の基準位置は本来あるべき場所ではなくて、
親要素(今回場合は、body)が基準です。
今回div-absolute1もabsolute2もbodyを同じ親に持ちますので、
二つともが同じ場所からのスタートになりこのようになりました。
<div id="absolute1">本来位置</div>
<div id="absolute2">移動後</div>
<style>
#absolute1{
position:absolute;
height:100px;
width:100px;
background-color:red;
top:0px;
}
#absolute2{
position:absolute;
height:100px;
width:100px;
background-color:blue;
top:100px;
}
</style>
なので、absoluteで二つを順番に並べたい場合は以下になります。
ちなみにabsoluteとrelativeを両方使った場合は以下になります。
<div id="absolute1"></div>
<div id="relative1"></div>
<style>
#absolute1{
position:absolute;
height:100px;
width:100px;
background-color:red;
}
#relative1{
position:relative;
height:100px;
width:100px;
background-color:blue;
}
</style>
ま、また、虚式「茈」を発動してしまった・・・
じゃなくてまた紫に!なんで?
これはね、注意が必要なんですが、absoluteというのは他のものにフル無視されます。
もう一度・・・・・・フル無視されます。
実にかわいそうですね・・・
ですので今回の場合relativeちゃんがabsoluteくんを無視して二人とも左上に位置しちゃいました。
ので注意が必要です。
absoluteというのはWEBサイト上で完全に独立して誰にも囚われずに配置されますので、注意が必要です。
position:fixedとは
さてさて、やっと本題のfixedです。
fixedはabsoluteとほぼ同じで、尚且つ、指定した位置に絶対固定されます。
スクロールしてもその位置に居続けます。
ので、fixedを使用したヘッダーの下に文字が隠れてしまうことがよく発生します。
<header></header>
<div id="header"></div>
<div id="relative1"></div>
<div id="relative2"></div>
<style>
header{
position:fixed;
width:100%;
height: 100px;
border:5px dotted red;
}
#header{
position:absolute;
width:100%;
height: 100px;
border:5px dotted red;
}
#relative1{
position:relative;
height:100px;
width:100px;
background-color:red;
}
#relative2{
position:relative;
height:100px;
width:100px;
background-color:blue;
}
</style>
赤い点線がheader部分に当たります。
このようにヘッダーの下に青色の領域を、それにrelativeを指定して、ヘッダーと同じサイズの領域を敷きます。
するとその次の赤の領域がきちんとヘッダーの下を基準位置に位置します。
結論:ヘッダーと同じサイズの領域をrelativeで重ねます。
そうすることによって、relativeのヘッダーのおかげで次の要素は配置したい位置になります。
それに重なるようにfixedを指定したヘッダーを配置します。