犬の手も借りたいあなたに最適な記事を届けます

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

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


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

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

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

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

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