【Position復習】ヘッダーと文字や領域が重なる時の解決法

2021-08-18

ヘッダーに「position:fixed;」を指定し、ヘッダーを固定したものの
その次の文字や領域がそのヘッダーの下に潜り込んでしまうのですね。

では「position」のおさらいから入ります。

positionには「relative」「absolute」「fixed」「sticky」と４つあります。

今回はよく使う３つをご紹介します。

「sticky」は、少し難易度が高いので、別記事で説明していますので、以下リンクよりお越しください。

2021-08-30【CSSのみ】Stickyでサイドバーに目次を固定。スクロール追尾

~目次~

position:relativeとは

「relative」は本来あるべき位置を基準点とします。

縦横100pxの領域（div）を二つ並べてみます。

今回はわかりやすいように１つ目に赤色、２つ目に青色を付与します

コードは以下です。

<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を指定したヘッダーを配置します。