1. TOP
  2. html&CSS入門
  3. CSSのpositionの使い方!absolute・relativeの違いも解説

CSSのpositionの使い方!absolute・relativeの違いも解説

positionとは、要素を配置する方法を決めることができるプロパティです。

このプロパティを扱えるようになると、好きな位置に要素を配置することができるようになるので、サイトで表現できる幅が大きく広がります。

簡単な例を見てみましょう。

<div id="demo_114">
   <p id="demo_114-2">子要素</p>
</div>
 #demo_114{
   width: 100%;
   height: 100px;
   background-color: tomato;
   position: relative;
 }
 
 #demo_114-2{
   
   /*   配置方法の変更 */
   position: absolute;
   bottom: 0;
   right: 0;
   
   /*   装飾 */
   width: 100px;
   height: 50px;
   background-color: royalblue;
 }

子要素

positionを使えば、上記のように「要素を右下に配置する」というようなことも簡単にできるようになります。

positionはどんな時に使うのか?

上述したとおり複雑な配置が実現したいときや、上部に固定して常に要素を表示するような事もできるので、スマホのヘッダーなどで使われることもあります。

positionの使い方

positionは下記のように使います。

position: 値;
top: 0;
left: 0;

posittionの値

positionの値には配置方法を示すキーワードが入ります。キーワードには以下のようなものがあります。

  • static
  • relative
  • absolute
  • fixed

などがあります。それぞれ設定する値によって配置方法が変わるので、後ほど一つずつ解説します。

positionとセットで使うtop・bottom・left・right

positionは位置を示す「top・bottom・left・right」と同時に使うことが多いです。

top・bottom・left・right」はそれぞれ基準の「上・下・左・右」からの距離を指定します。

  • top:基準の上からの距離
  • bottom:基準の下からの距離
  • left:基準の左からの距離
  • right:基準の右からの距離

たとえば、

top: 10px;
right: 10px;

とすると、基準位置の上から10px、右から10pxの位置に配置されます。

また、「0」を指定した場合は、くっつきます。

bottom:0;

上記はbottomなので下にくっつくことになります。

また、leftとrightを同時に設定した場合、leftが優先されます。topとbottomが同時に設定された場合はtopが優先されます。

基本的には、leftとrightのどちらかを設定すれば、横の位置は決まるので両方設定することはあまりありません。topとbottomも同様に両方設定することはほとんどありません。

staticの場合

初期値です。何も指定しない場合はこの値になります。

staticの場合は、「top、bottom、left、right」などの位置指定はできません。指定しても無効になります。

relativeの場合

「もともと表示されるはずだった場所」を基準とした配置になります。相対位置と呼ばれます。

例を見てみましょう。まずは相対位置を指定しない場合。

 <div id="demo_115">
   <p id="demo_115-2">子要素1</p>
   <p id="demo_115-3">子要素2</p>
 </div>
 #demo_115{
   width: 100%;
   height: 100px;
   background-color: tomato;
 }
 
 #demo_115-2{
   width: 100px;
   height: 50px;
   background-color: royalblue;
 }
 #demo_115-3{
   width: 100px;
   height: 50px;
   background-color: teal;
 }

子要素1

子要素2

相対位置を指定しなければ、子要素が2つ並ぶだけです。ここから子要素2に相対位置を指定してみます。

<div id="demo_116">
   <p id="demo_116-2">子要素1</p>
   <p id="demo_116-3">子要素2</p>
 </div>
 #demo_116{
   width: 100%;
   height: 100px;
   background-color: tomato;
 }
 
 #demo_116-2{
   width: 100px;
   height: 50px;
   background-color: royalblue;
 }
 #demo_116-3{
   position: relative; /* 相対位置に設定 */
   left: 50px;/* 左からの距離を設定 */
   top: 10px; /* 上からの距離を設定 */
   width: 100px;
   height: 50px;
   background-color: teal;
 }

子要素1

子要素2

このように、本来であれば表示されるはずだったと場所を基準として、指定した距離だけ動いているのがわかります。

ちなみに、位置をずらして隙間ができても、他の要素が詰められることはありません。

absoluteの場合

absoluteを指定すると、「static」以外が指定されている一番近い祖先要素を基準とした配置になります。

基本的には、親要素に「relative」を指定して使います。

文章ではわかりづらいので例を見てみましょう。

<div id="demo_114">
   <p id="demo_114-2">子要素</p>
</div>
 #demo_114{
   width: 100%;
   height: 100px;
   background-color: tomato;
   position: relative;
 }
 
 #demo_114-2{
   
   /*   配置方法の変更 */
   position: absolute;
   bottom: 0;
   right: 0;
   
   /*   装飾 */
   width: 100px;
   height: 50px;
   background-color: royalblue;
 }

子要素

親要素に「relative」が指定されているので、この親要素が基準になります。 bottom: 0;、 right: 0;を指定して、右下にくっつくように設定しています。

親要素はrelativeにするのを忘れない

absoluteを使うときは、親要素のpositionを「relative」もしくは、「fixed」にするのを忘れないようにしましょう。

これを忘れてしまうと基準位置が思ったとおりの要素にならず、レイアウトが崩れてしまいます。

親要素に「static」以外がない場合、その親をたどり最初に見つかった「static」以外の祖先要素が基準となります。祖先要素にもない場合、最終的にはウインドウ全体の左上を基準とします。

absoluteの使い道!画像のキャプションを作る

absoluteを使って、画像の上にキャプションを乗せるサンプルを作ってみましょう。

  <div id="demo_117">
      <img id="demo_117-1" src="https://wunderstand.net/wp-content/uploads/2019/06/01.jpg">
      <div id="demo_117-2">
          この画像はいい画像ですね。
      </div>
  </div>
#demo_117{
   width: 250px; 
   position:  relative; /* 子要素の基準位置に設定 */
 }
  
 #demo_117-1{
    width: 100%;
 }
  
 #demo_117-2{
    position:  absolute;/* 要素の配置方法を指定 */
     bottom: 0;/* 親要素の下にくっつける */
 }
この画像はいい画像ですね。

親要素にrelativeを設定し、子要素にはabsoluteを設定しています。また、親要素の下にくっつけるためにbottom: 0;を設定指定しています。

簡単に、画像の上に文字を乗せることが出来ましたね。あとは、子要素を少しカスタマイズすれば完成です。

 <div id="demo_118">
     <img id="demo_118-2"src="https://wunderstand.net/wp-content/uploads/2019/06/01.jpg" alt="">
     <div id="demo_118-3">
         この画像はいい画像ですね。
     </div>
 </div>
#demo_118{
 width: 250px; 
 position:  relative; /* 子要素の基準位置に設定 */
}

#demo_118-2{
  width: 100%;
}

#demo_118-3{
  position:  absolute;/* 要素の配置方法を指定 */
  bottom: 0;/* 親要素の下にくっつける */

  /* 以下装飾 */
  width: 100%;
  padding: 10px;
  box-sizing:border-box;
  background-color: rgba(0, 0, 0, 0.8);
  color:#fff;
}
この画像はいい画像ですね。

fixedの場合

fixedを指定すると、基準の位置がウィンドウになります。また、スクロールしても固定されたままになります。

例を見てみましょう。

<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p>ああああああああああ</p>
<p id="demo_119">固定したい文言</p>
#demo_119{
position: fixed;
top: 0;

/* 以下装飾 */
padding: 5px;
margin: 0;
width: 100%;
background: tomato;
color:white;
}

このようにすると、fixedが指定された要素はスクロールしても常に位置が固定されたままになります。

常に表示されるので、サイト内で重要なメニューバーなどに使う事が多いです。

まとめ

  • positionとは、要素を配置する方法を決めることができるプロパティ
  • positionは、static、relative、absolute、fixed、stickyなどのキーワードが入る
  • positionは位置を示す「top・bottom・left・right」と同時に使うことが多い