CSSのpositionを総まとめ!absoluteやfixedの使い方は?

CSSのpositionの使い方まとめ

今回はCSSのpositionプロパティについて解説していきます。基礎知識から「具体的にどのように使えるのか」というところまでみっちり解説します。

1. CSSのpositionとは?

positionプロパティとは

positionとはものすごくざっくりというと「要素の位置を決める」ためのプロパティです。

要素とは?

どんな使い方ができるの?

このpositionプロパティは具体的にどのようなときに使うのでしょうか。

要素の位置を動かす

たとえば「要素の位置を20pxだけ右に動かす!」というようなことができたり…

要素の上に別の要素をのせる

要素の上に別の要素を重ねてのせることができたり…(この図は画像の上に要素をのせるイメージです)

要素を固定する

また画面の決まった位置に要素を固定して表示させることができたりします。

それぞれの方法はこれから紹介していきます。

positionの書き方

positionプロパティはCSSで以下のように書きます。

◯◯ {position : 値}

◯◯にはセレクタが入ります(セレクタとは?)。値には次の4つのどれかを指定します。

positionの値

  • static:初期値はこれ。指定することはほとんどない
  • relative:現在の位置を基準に相対的な位置を決める
  • absolute:親要素を基準に絶対的な位置を決める
  • fixed:画面のきまった位置に固定する

たとえば、class名が”test”の要素の相対的な位置を指定したいときには、.test {position: relative}というように書くわけですね。それぞれの値の意味はのちほど解説するので、この段階で理解する必要はありません。

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

positionは基本的にtopbottomleftrightというプロパティとセットで使います。イメージとしては、以下のようになります。

位置を指定する流れ

  1. positonで基準を決める
  2. top bottom left rightで具体的な位置を数字で調整

ではこのtopやらbottomやらにはどのような意味があるのでしょうか。

top・left・right・bottomの考え方

考え方はこの図のようになります。基準からの距離で指定するわけですね。

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

たとえば、基準の上からの距離を10pxにしたいときは.test {top: 10px}というように書きます。

サルワカくんの顔(通常)
サルワカくん

「この基準の位置をどうするか」というのをさきほどのpositionプロパティで決めるわけです。

基本的にこのうちの2つを使う

topleftなどは基本的に2つを組み合わせて使います。少し例を見てみましょう。

左上からの位置を決める例

たとえば、top:10pxleft:10pxと指定した要素は、基準の左上から右に10px、下に10pxの位置に配置されます。

基準の左上にぴったりくっつける

top:0left:0にした場合は、基準の左上にぴったりとくっつきます。

位置を決める例その2

また、bottom:10pxright:10pxを指定された要素は、右下から上に10px、左に10pxの位置に配置されます。

要素の右下にぴったりくっつける例

bottomrightを0にした場合は、基準の右下にぴったりとくっつきます。

leftright、またはtopbottomを同時に指定することは殆どありません。※ ちなみにtopとbottomを同時に0に指定すると要素は縦いっぱいに広がります。leftとrightを同時に0にすると要素は横いっぱいに広がります。

3. staticとは?

ここからはpositionの値ごとにどのような位置指定ができるのかを解説していきます。まずposition: staticから見ていきましょう。

特徴

  • 初期値:CSSで何も指定していなければコレになっている
  • 要素は通常の位置に:上下左右に動かすことができない
  • 要素の位置を調整できないtopleftなどを指定しても効かない
  • z-indexを指定できない:要素の重なり順を変えられない

基本的にstaticを指定することはありません。そのためあまり意識することのない値なのですが、以下のことを頭に入れておきましょう。

staticは位置が変えられない

top:10pxなどと指定しても効きません。位置を変えたいときはrelativeabsoluteにしましょう。

z-indexを指定できない

z-indexとは要素の重なり順を決めるプロパティです。staticではz-index:0の状態になっており、変えることができません。

4. position: relative

position: relativeは現在の表示位置から相対的に要素の位置を動かしたいときに使います。

position:relativeとは?

このように本来の表示位置から、右と下に10pxずつ動かすというようなことができるわけですね。

使用例

実際にコードを書いて指定してみましょう。要素をposition: relativeにしたうえでtopleftをそれぞれに10pxに指定してみます。分かりやすくするために指定なしの要素も作ることにします。

HTML
<p>指定なし</p>
<p id="relative">relative</p>
CSS
#relative {
     position: relative;
     top: 10px;
     left: 10px;}
/*装飾は省略*/
ブラウザ表示

指定なし


relative


解説

relativeの使用例

本来の表示位置が基準になり、上から10px(top:10px)、左から10px(left:10px)だけ移動したわけですね。

staticとrelativeの違い

position:relativeとしても、topbottomを指定しなければstaticと同じ位置に表示されます。そのため一見同じように感じられますが、①位置調整の可否や②z-index指定の可否という違いがあります。「z-indexやtopなどが指定できないときはrelativeにする!」とおぼえておくと良いでしょう。

5. position: absolute

position: absoluteを使うとデザインの幅がぐっと広がるので、使い方を覚えておくことをおすすめします。

position:absoluteとは

absoluteだと親要素を基準に、絶対的な位置を指定することになります。たとえば「親要素の左上から下に10px、右に10pxの位置に配置する」というようなことができます。

この「絶対的な位置」というのは、要素がどんな形であろうと、間に他の要素や余白が入っていようと、その位置に配置してくれるということ意味します。これは例を見てみるのが早いかもしれません。

使用例

"parent"というclass名の親要素の中に要素①と要素②を入れてみました。まず何も指定しなかった場合は以下のように表示されます。

position指定なしの場合

HTML
<div class="parent">
     <p>要素①</p>
     <p id="absolute">要素②</p>
</div>
ブラウザ表示

要素①

要素②


グレイの部分が親要素(.parent)

要素②をabsoluteにした場合

要素②をabsoluteにしたうえでtopleftを0にしてみましょう。

HTML
<div class="parent">
     <p>要素①</p>
     <p id="absolute">要素②</p>
</div>
CSS
.parent {
     padding: 20px;
     position: relative;
     /*親要素はrelativeに*/}
.absolute {
     position: absolute;
     top: 0;
     left: 0;
}
/*装飾は省略*/
ブラウザ表示

要素①

要素②


親要素の左上にぴったりとくっつきました。

解説

absoluteの例の解説

もしtopleftの値を指定した場合は、親要素の左上が基準点となります。両方0の場合は、親要素の左上にピッタリとくっつきます。

逆にbottom:0right:0と指定すれば、親要素の右下にピッタリとくっつくことになります。またabsoluteは絶対的な位置指定です。そのため他の要素があろうと表示位置は変わらず重なって表示されるのですね。

親要素はrelativeにしておく

absoluteを使って位置調整するときは、親要素にposition:relative(もしくはfixed)を指定しておきましょう。これを忘れると基準位置がずれて思ったように表示されません。absoluteを使うときは、おまじないのように親要素もセットで変えるようにしましょう。

absoluteの便利な使い方

absoluteの便利な使い方例

たとえばサルワカのトップページのアイキャッチ写真上のカテゴリ名はabsoluteを使って表示されています。

画像の上に要素を重ねてみよう

実際にabsoluteで画像の上に文字をのせるCSSを書いてみます。ここではbottomrightを0にすることで右下にのせてみましょう。

HTML
<div id="example">
     <img src="bear.jpg"/>
     <span>クマさん</span>
</div>
CSS
#example {/*親要素*/
     position: relative;
     padding:0;/*要素内の余白は消す*/
}
#example span{/*文字*/
     position: absolute;
     bottom: 0;
     right: 0;
     /*以下装飾*/
     color: white;
     background: #74c1f8;
     padding:0 2px;
     line-height:1.5em;
}

クマの写真

クマさん

画像の右下にクマさんと表示されましたね。親要素はdivで画像(img)ではありませんが「親要素内にピッタリはまった画像の上に文字がのった」というイメージです。

位置を変えてみる

たとえばbottomrightをそれぞれ10pxに変えてみます。

CSS
/*略*/
#example span{/*文字*/
     position: absolute;
     bottom: 10;
     right: 0;
     /*略*/
}

クマの写真

クマさん

画像の右下から上に10px、左に10pxの位置に文字が配置されました。

サルワカくんの顔(通常)
サルワカくん

値にはマイナスの値を指定することもできます。親要素からあえてはみ出させたいときに使えるテクニックですね。

6. position: fixed

最後はfixedです。これは画面の決まった位置に要素を固定させたいときに使います。

fixedのイメージ

スクロールしても位置が変わらないメニューバーやソーシャルボタンを表示したいときなんかに使うと便利です。

fixedの例

このようにタイトルバーが固定されたデザインはよく見ますね。これはfixedtopにより「画面の1番上に表示する」という指定をしているのです。

absoluteと指定方法がほとんど同じですが、位置の基準は親要素ではなく「ウィンドウ全体」です。そのため、要素の位置に関係なくtop: 0と指定したら画面の最上部に表示されます。

使用例

ある要素を画面の上部に常に表示するようにしてみましょう。

HTML
<p>これは文章です。</p>
<p>これは文章2です。</p>
.
.
.
<p>これは文章20です。</p>

<p id="fiexed">fixed</p>
CSS
#fixed {
	position: fixed;
	top: 0;/*基準を画面の左上に*/
	left: 0;
	margin: 0;/*余白が入らないように*/
	/*以下装飾*/
	width: 100%;
	background: #FFC778;
	color:white;
	}
ブラウザ表示

fixedの使い方例


スクロールしても常に上側に要素を固定することができました。このように何かを固定するときにfixedは使えるのですね。

サルワカくんの顔(通常)
サルワカくん

positionを使いこなすことができるようになると本当にウェブデザインが楽しくなります。マスターして自分の好きなレイアウトを実現しましょう。

サルワカ