positionについて

job_illustrator_pc_woman-e ※Web開発

【補足解説】position

CSS

positionについて

positionには4つの値があります。

  1. static(スタティック)：初期値
  2. relative(リラティブ)：現在の位置を基準に相対的な位置を決める
  3. absolute(アブソリュート)：親要素を基準に絶対的な位置を決める
  4. fixed(フィクスト)：画面の決まった位置に固定する

また、positionは基本的に「top」「bottom」「left」「right」というプロパティとセットで使用します。

positionで基準を決めて、「top」「bottom」「left」「right」で具体的な位置を数字で調整します。

例えば、基準の上から50pxとしたい場合は「.box { top: 50px; }」のように書きます。

relativeについて

relativeは現在の位置を基準に相対的な位置を指定します。 例として以下のようなコードを用意します。

.box1{
width: 200px;
height: 150px;
background: rgb(247, 162, 162);
color: #fff;
text-align: center;
line-height: 150px;
}
.box2{
width: 200px;
height: 150px;
background: rgb(250, 240, 106);
color: #fff;
text-align: center;
line-height: 150px;
}
.box3{
width: 200px;
height: 150px;
background: rgb(162, 202, 247);
color: #fff;
text-align: center;
line-height: 150px;
}

今回、縦にならんだ「box1」「box2」「box3」のうち、「box2」のCSSに下記のコードを追加します。

.box2{
width: 200px;
height: 150px;
background: rgb(250, 240, 106);
color: #fff;
text-align: center;
line-height: 150px;
/* 追加コード */
position: relative;
top: 150px;
left: 100px;
}

するとrelativeは現在の位置を基準として、基準の左上から動くので下記のように動きます。

本来の表示位置から「top:150px」(上から150px)「left:100px」(左から100px)動いています。

absoluteについて

absoluteは親要素を基準に絶対的な位置を指定します。

absoluteは、

  1. 親要素のpositionプロパティにstatic以外の値が指定されている場合、親要素が基準
  2. 上記以外はウィンドウを基準

となります。

今回は、②のウィンドウを基準としてみていきます。 「box2」のCSSに以下のコードを追加します。

.box2{
width: 200px;
height: 150px;
background: rgb(250, 240, 106);
color: #fff;
text-align: center;
line-height: 150px;
/* 追加コード */
position: absolute;
top: 0px;
left: 0px;
}

試しに「top」「left」の値を「0」にしてみます。

すると右のように親要素左上にぴったりくっついています。

これはtopとleftの値を指定した場合、左上が基準となるからです。

逆に「bottom」「right」の値を0にすると親要素の右下が基準となります。

左上を基準として「top:150px」「left:100px」とすると以下のようになります。

absoluteは絶対的な位置指定です。

そのため他の要素があっても、表示位置は変わらず重なって表示されます。

今回はウィンドウを基準としましたが、absoluteを使って位置調整するときは親要素にrelateive、またはfixedを指定し、基準とする場所を親要素に設定するようにしましょう。

fixedについて

fixedは画面の決まった位置に固定させたいときに使用します。

例えば、スクロールしても位置が変わらないメニューバーを表示したいときなどによく使われるものになります。

例えば以下のようなコードを実行するとスクロールしても位置が変わらないことがわかります。

<!DOCTYPE html>
<html lang=”ja”>
   <head>
       <meta charset=”UTF-8″>
       <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
       <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
       <title>position</title>
       <style>
           .fixed {
               position: fixed;
               padding: 15px;
               top: 0;
               left: 0;
               margin: 0;
               width: 100%;
               background: pink;
               color: #000;
           }
       </style>
   </head>
   <body>
       <p>サンプルサンプルサンプル1</p>
       <p>サンプルサンプルサンプル2</p>
       <p>サンプルサンプルサンプル3</p>
       <p>サンプルサンプルサンプル4</p>
       <p>サンプルサンプルサンプル5</p>
       <p>サンプルサンプルサンプル6</p>
       <p>サンプルサンプルサンプル7</p>
       <p>サンプルサンプルサンプル8</p>
       <p>サンプルサンプルサンプル9</p>
       <p>サンプルサンプルサンプル10</p>
       <p>サンプルサンプルサンプル11</p>
       <p>サンプルサンプルサンプル12</p>
       <p>サンプルサンプルサンプル13</p>
       <p>サンプルサンプルサンプル14</p>
       <p>サンプルサンプルサンプル15</p>
       <p>サンプルサンプルサンプル16</p>
       <p>サンプルサンプルサンプル17</p>
       <p>サンプルサンプルサンプル18</p>
       <p>サンプルサンプルサンプル19</p>
       <p>サンプルサンプルサンプル20</p>
       <p class=”fixed”>固定されたP要素</p>
   </body>
</html>

最初は混乱するかもしれませんが、ぜひ覚えておきましょう。

タイトルとURLをコピーしました