【CSS入門】positionの書き方

  • 2020.02.24
  • 2022.05.04
  • CSS
【CSS入門】positionの書き方

CSSでよく使うpositionの書き方がわからない。。
positionの書き方について教えてほしい!

こういった疑問に答えていきます。
本日の内容は以下です。

  • positonプロパティとは?
  • positionの書き方

positionプロパティは、Webサイトを作成する中でよく使うプロパティです。
positionプロパティと使うことで、画像と文字を重ねて表示させたり、特定の場所に要素を配置させたりできます。

この記事では、「positionプロパティの書き方」についてわかりやすく解説していきます。
この記事を読めば、様々な場面でpositionプロパティを使うことができるようになります!

では早速やっていきましょう!

positionプロパティとは?

positionプロパティは、HTML要素の配置を指定できるプロパティです。
本来であれば、重なることのない要素同士を重ねて表示することもできるようになります。

では実際に、positionプロパティの使い方について解説していきます。

positionの書き方

positionの書き方は、下のように書きます。

セレクタ{
   position: 値;
   top: 数値;
   bottom: 数値;
   left: 数値;
   right: 数値;
}

値には、事項で解説する値を指定し、「top」「bottom」「left」「right」で配置の場所を指定していきます。
値は配置方法を指定するだけで、実際の場所は、左上を基準に「top」「bottom」「left」「right」に数値を指定し決めていきます。

では実際に、値について解説していきます。

absolute

absoluteは、絶対配置を指定する時に使用する値です。
absoluteを指定する場合は、スタートは左上から始まり「top」「bottom」「left」「right」で配置が決まります。

relative

relativeは、相対配置を指定する時に使用する値です。
「top」「bottom」「left」「right」で配置を決めるのは同じですが、absoluteとは反対に、現在の位置から配置を決めていきます。

また、親要素に「position: relative ;」、子要素に「position: absolute ;」と指定することで、子要素のスタート位置を親要素のスタート位置に変えることができます。

親要素{
 position: relative;
}

子要素{
 position: absolute;
 top: 数値;
 left: 数値;
}

fixed

fixedは、absoluteと同じ絶対配置ですが、スクロールした時も位置が固定されます。
fixedがよく使われるのは、最上部にナビゲーションを固定し、スクロール時にも常に表示されるといった風に使用されます。

また「z-index: 数値;」と指定すると、要素同士の重なり順を指定することもできます。

セレクタ{
 position: fixed;
 top: 数値;
 z-index:10; //数値が高いほど、上に表示されます。
}

まとめ

positionプロパティは、要素同士を重ねたり、特定の場所に配置したい場合などによく使用されます。
必ずと言っていいほど使うプロパティになるので、必ず覚えましょう!