【HTML/CSS】positionを駆使！概要・使い方を徹底解説

HTMLで配置した要素の基準位置を定めるプロパティがpositionです。positionプロパティで要素の位置を指定することによって、HTMLの要素の位置を思い通りに配置することができます。本記事では、HTML/CSSにおけるpositionプロパティの概要や使い方を徹底的に解説していきます。

HTML/CSSにおけるpositionプロパティとは？

まずはHTML/CSSにおけるpositionというプロパティについて説明していきましょう。positonプロパティについて一言で表すとするとHTMLの要素位置を指定するプロパティと言えるでしょう。

では、どんな使い方ができるのか。たとえば、以下のようなケースでpositonプロパティは活躍してくれます。

ただし要素の高さや横位置については、以下のプロパティを併用する必要があります。

• topプロパティ（頂点からの位置の指定）
• bottomプロパティ（最下部からの位置の指定）
• leftプロパティ（左からの位置の指定）
• rightプロパティ（右からの位置の指定）

すでに上記4つのプロパティについて知っている方は多いかもしれません。ただ、このプロパティだけでは要素の位置指定にも限界がありますし、要素同士を重ね合わせるということはできません。positionプロパティを上記4プロパティと併用することによって、要素をより思い通りに配置することができるようになるのです。

positionプロパティの基本的な書き方

次にpositionプロパティの基本的な書き方について簡単に見ていきましょう。後ほど実践的な使用方法について紹介しますので、こちらではどのようにコードを書けばいいのかについて理解していただければ充分です。

positionプロパティの基本的な書き方

(セレクタ名) { position : (値) }

セレクタにはpositionプロパティの効果を反映させる要素かnameプロパティ、idプロパティを入れましょう。上記では少し書き方としてイメージがしづらいかもしれません。以下にpositionプロパティを実際に使用した例を記載しますので参考にしてください。

HTML

CSS

.example-parent {
  width: 500px;
  height: 300px;
  background-color: blue;
}

.example-child {
  position: relative;
  top: 100px;
}

ポイントとしてはpositionプロパティに「relative」を指定し、topプロパティに「100px」と指定したことで、「.example-child」というnameプロパティを持ったp要素が本来あるべき位置から100px下に移動したということです。

positionプロパティに指定できる値

さて、ここまでpositionプロパティの概要や簡単な使用例について見てきました。先ほどの例の中でpositionプロパティに「relative」という値を設定しましたね。それではこの値「relative」とは一体なんでしょうか？その点について詳しく説明していくとととも、他に指定できる値についても紹介していきましょう。

positionプロパティに指定できる値

positionプロパティを使用したことがない方からすれば「relative」という値は聞き慣れず、しかも他にも値に種類があるとなると理解できるか不安かもしれません。しかし、安心してください。potisionプロパティに指定できる値は4種類だけです。それぞれの特徴や使い所を理解できれば、必ずやpositionプロパティを使いこなすことができるようになるでしょう。

それぞれの特徴とともに、使い方を具体的に見ていきましょう。

static

staticはpositionプロパティを指定しなくてもデフォルトで設定されている値です。要素にpositionプロパティを設定していない場合には自動的にstaticが指定されることとなります。

要素のpositionプロパティにstaticが指定されているときには、要素に対してCSSでtop / bottom / left / rightを指定したとしても位置に反映されません。以下に実例を記載するので、テキストエディタなどにコピー&ペーストして、要素の位置が変わらないことを確認してください。

HTML

CSS

.example-parent {
  width: 500px;
  height: 300px;
  background-color: blue;
}

.example-child {
  position: static;
  top: 100px;
}

positionにstaticを指定しているため、.example-childのp要素の位置は変わりません。前述の通り、要素にはもともと指定しなくても「position: static;」が設定されているため、positionプロパティを指定しなくても結果は同様です。

relative

先ほど登場したrelativeです。こちらの値は要素がもともとあるべき位置を基準として位置を指定することができる値です。こちらは実際に使用例を見た方が理解がしやすいでしょう。

HTML

CSS

.example-parent {
  width: 500px;
  height: 300px;
  background-color: blue;
}

.example-child {
  position: relative;
  top: 20px;
  left: 20px;
}

上記のコードでは「.example-child」というnameプロパティを指定したp要素、何も指定していないp要素の2つを用意しました。すると「.example-child」が指定されているp要素のみ位置が変わりました。このp要素は、何も指定していないp要素の真上にあるべき要素です。そこから「top: 20px;」、「left: 20px;」だけ移動し、現在の位置にあります。

absolute

absoluteはrelativeが設定された親要素の位置を基準として、位置を指定することができる値です。こちらも実際に使用例を見た方が理解ができるはずです。いかに見てみましょう。

HTML

CSS

.example-parent {
  width: 500px;
  height: 300px;
  background-color: blue;
  position: relative;
}

.example-child {
  position: absolute;
  background-color: red;
  top: 1px;
  left: 10px;
}

上記で説明した通り、親要素の「example-parent」には「position: relative;」が指定してあります。そして子要素の「example-child」には「position: absolute;」とともに、top / leftの値が指定してあります。このようにすることで、他の要素と重ね合わせることも可能です。

fixed

fixedは指定された位置に要素が固定される値です。この値を使用すれば、スクロールしてもブラウザに表示され続けるメニューバーなどを作ることもできます。以下に実例を見てみましょう。

HTML

CSS

.example-parent {
  width: 500px;
  height: 1000px;
  background-color: blue;
  position: relative;
}

.example-child {
  position: fixed;
  background-color: red;
  top: 1px;
  left: 10px;
}

まとめ

本記事では、HTML/CSSにおけるpositionプロパティの概要や使い方を徹底的に解説していきました。positionプロパティを使いこなすのには慣れが必要ですが、まずはよく使用する値「relative」と「absolute」に慣れていきましょう。特にこの2つを使いこなせば要素を重ね合わせ、より立体的なデザインをすることができます。

【関連記事】
▶︎【HTML】表を作成するときに役立つタグについてわかりやすく解説。
▶︎【HTML】HTML5で廃止された属性なども解説。に使用できる属性まとめ
▶︎HTMLのoptionを使って選択状態（selected）を設定する方法