position

要素の配置方法を指定するために使うプロパティ
例えば少し右に動かしてみたり、どんなにスクロールしても同じ位置に表示してみたり
使い方は様々

基本的な記述方法は

の形で記述する
プロパティ値には色々な値が用意されていますがここでは

• static：初期値
• relative
• absolute
• fixed

上記4つを紹介します

static

何の指定もしていなかったら全ての要素に設定されている初期値
要素の位置や重なり順を変更できない
基本的にstaticを指定することはないのです。

relative

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

position:relativeとしても、位置の指定しなければstaticと同じ位置に表示されます。一見同じように感じられますが

• 位置調整が可能になる
• 要素の重なり順の設定も可能になる

この二点が違います。
z-indexやtopなどが指定できないときはrelativeに！

absolute

absoluteを設定すると絶対的な位置を指定していきます。（絶対配置）

よく使われるやり方は親要素に「position:relative」を指定し、親要素を基準に操作する方法
「親要素の左上から下に10px、右に10pxの位置に配置する」としたいときは、
「position:absolute」「top:10px」[left:10px]とcssに記述することで実現できます。
この「絶対的な位置」というのは、要素がどんな形でも、間に他の要素や余白が入っていても、その位置に配置してくれます。

上にも書きましたが、absoluteを使って位置調整するときは、親要素にposition:relative（fixedでもOK）を指定しておきましょう。
これを忘れると基準位置がずれて思ったように表示されません。
absoluteを使うときは、親要素に「position:relative」をつけましょう！

このコードだと要素①と②が縦に並ぶだけですが、absoluteとかををつけてみると・・・

fixed

fixedは画面の決まった位置に要素を固定させたいときに使います。（固定配置）

例えばスクロールしてもページ上部にメニューを表示させておきたいときや、ページ下部に「TOPへ戻る」ボタンを表示させておきたいときに使えます。

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

合わせて覚えておきたいプロパティ

さらに重なり順の設定をする「z-index」
位置の調整をする「top」「bottom」「left」「right」
等のプロパティを使い要素を動かします。

z-index

z-indexは要素の重なり順を指定するプロパティ。
値には数字を入れて使います。

デフォルトでは「z-indexは0」になっていて、後に書いたものが上に来ますが、このプロパティを設定すると数字が大きいほうが上にくるようになります。

使用例

top・bottom・left・right