【コピペ可】cssのposisionをサンプルでわかりやすく図解

本記事は、自由にレイアウトを変えたり、固定したりできる、positionの使い方についての解説です。

本記事の内容は下記の通りです。サンプルを交えて解説していきます。

• posisionの概念をリファレンスよりわかりやい言葉で解説
• 要素を好きな位置に配置・固定する方法をサンプル付きで解説

こんなぼくが解説します

サンプル付きで解説していきます。もし使えそうなコードがあればどんどんコピペしてもらって構いません。

CSSのpositionとは

positionとは、配置の基準点を指定するプロパティです。要素を自由に配置したり、固定したりする場合などに使います。

例えば、上部にメニューを固定したり

はたまた、画像の上に要素を重ねて配置したり

といった事ができます。

ラムネ

positionを使うと、好きな位置に要素を配置することができるようになるので、サイトで表現できる幅が大きく広がります。

positionの使い方

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

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

positionの値には配置方法を示すキーワードが入ります。また続けて、top、leftなどのように表示位置を指定する指定を行います。

positionのキーワードについて

positionのキーワードには以下のようなものがあります。

static　←初期値

初期値です。通常の位置で配置される

relative

「もともと表示されるはずだった場所」を基準に相対的な位置を指定

absolute

親要素を基準に絶対的な位置を指定

fixed

画面を基準に絶対的な位置を指定

sticky

スクロールに応じた絶対的な位置を指定

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

表示位置のプロパティについて

positionは位置を示すプロパティである「top・bottom・left・right」と同時に使うことが多いです。

「top・bottom・left・right」は基準要素からの距離を指定します。

• top：上からの距離
• bottom：下からの距離
• left：左からの距離
• right：右からの距離

例えば、

top: 10px;
left: 10px;

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

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

bottom:0;

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

基本的にはleftとtopだけを使う事が多いです。

なぜなら、leftとrightのどちらかを設定すれば、横の位置は決まるのでleftだけで十分ですし、topかbottomのどちらかを指定すれば縦の位置が決まるのでtopだけで十分だからです。

posision:staticの解説

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

staticは通常の位置に配置されます。「top、bottom、left、right」などの指定やz-indexの指定はできません。

z-indexというのはpositionがstatic以外の時のみ使える、重ね順を指定するプロパティです。positionを使うと要素同士が重なる事が多いので、これを設定できるようになります。

z-indexに関しては下記記事で解説しているので参考にしてください。

参考記事

【CSS】z-indexの使い方をサンプルで解説！効かない理由は

この記事ではCSSで重なり順を設定するz-indexについて、サンプルを交えて解説していきます。本記事の内容は下記の通りです。 z-indexの使い方をサンプル付きでリファレンスよりわかりやすく解説 z-indexが効か ...

posision:relativeの解説

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

例を見てみましょう。

<p id="demo_116-2">要素1</p>
<p id="demo_116-3">要素2</p>
<p id="demo_116-2">要素3</p>
<p id="demo_116-2">要素4</p>

 #demo_116-2{
   width: 100px;
   height: 50px;
   background-color: royalblue;
   border:1px solid #ccc;
 }
 #demo_116-3{
   position: relative; /* 相対位置に設定 */ 
   left: 50px;/* 左からの距離を設定 */
   bottom: 10px; /* 上からの距離を設定 */
   border:1px solid #ccc;
   width: 100px;
   height: 50px;
   background-color: teal;
 }

「要素2」にrelativeと、左から50px・下から10pxを指定していますので、本来あるべき位置を基準として右上にずれているのが確認できます。

また、z-indexの指定が可能なので、重なり順を変更することも可能です。

posision:absoluteの解説

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

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

また、absoluteを指定した要素は「高さがない」という認識になりますので、下に続く要素は詰められます。

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

<div id="demo_114">基準要素
  <p id="demo_114-2">子要素1</p>
  <p id="demo_114-3">子要素2</p>
  <p id="demo_114-2">子要素3</p>
  <p id="demo_114-2">子要素4</p>
</div>

#demo_114{
   width: 100%;
   background-color: tomato;
   position: relative;
 }
 #demo_114-2{
   /*   装飾 */
   width: 100px;
   height: 50px;
   background-color: royalblue;
 }
 #demo_114-3{
   /*   配置方法の変更 */
   position: absolute;
   top: 50px;
   left: 200px;
   /*   装飾 */
   width: 100px;
   height: 50px;
   background-color: teal;
 }

まず、オレンジの親要素に「relative」が指定されているので、この要素が基準になります。

「子要素2」には、absoluteが設定されているので、親要素の位置を基準として、指定された位置に配置されているのが確認できます。

また「子要素2」の下の要素が、まるで「要素2」が無かったかのように詰められているのも確認できます。

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

absoluteを使えば画像の上にキャプションを乗せる事ができます。

この画像はいい画像ですね。

  <div id="demo_117">
      <img id="demo_117-1" src="http://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="http://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;
}

キャプションに背景色や余白を設定しました。

ちょっと本題からはずれますが、box-sizing:border-boxを設定しているのは、これを設定しないとキャプションが画像をはみ出してしまうからです。

なぜはみ出すのかは、下記の記事で解説していますので参考にしてみてください。

参考記事

横幅100%で親要素をはみ出す時はbox-sizingを使おう

  この記事では子要素が横幅100%にも関わらず、親要素をはみ出してしまう原因と、対処法であるCSSの「box-sizing」について解説します。 横幅100%でもボーダーや余白があると親要素をはみ出します。ボ ...

posision:fixedの解説

fixedはウィンドウを基準とした絶対位置を指定します。ウィンドウに対する位置なので、スクロールしても固定されたままになるのが大きな特徴です。

下記のように記述します。

<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が指定されている(固定したい文言)という部分が上部に固定されます。

top:0に指定しているので上部に固定されますが、下部に固定したい場合はこの部分をbottom:0;に変えるだけでOKです。

ラムネ

常に表示されるので、「メニュー」や「上に戻る」などに使われる事が多いです。

まとめ

• positionとは、配置の基準点を指定するプロパティ
• positionは、static、relative、absolute、fixed、stickyなどのキーワードが入る
• positionは位置を示す「top・bottom・left・right」と同時に使う
• staticは初期値で、通常の位置で配置される
• relativeは「もともと表示されるはずだった場所」を基準に相対的な位置を指定する
• absoluteは親要素を基準に絶対的な位置を指定する
• fixedは画面を基準に絶対的な位置を指定する

関連記事

【CSS】z-indexの使い方をサンプルで解説！効かない理由は

横幅100%で親要素をはみ出す時はbox-sizingを使おう