記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【css】 positionの基礎知識・使い方(サンプルコード付き)

positionの使い方を、初心者の方向けに紹介。 基礎知識はもちろんのこと、具体的な方法をサンプルコード付きで詳しく解説。サンプルコード付きなので実際に手を動かして学ぶ事ができ、ご自身のweb制作に活かす事ができます。

カテゴリ: HTML/CSS

こんにちは!
「positionって何・・?」「要素の位置を思うように移動させたい・・!」「要素の位置を固定させたい・・!」

positionの基礎知識を理解し、思うように位置を変更・固定させたい。そのように考えている、初心者web制作者の方も多いのではないでしょうか?

要素の位置移動・固定はWEB制作で欠かせない概念になってきます。

今回は、初心者の方向けに、要素の位置移動プロパティ「 position」に詳しく解説していきます。

positionとは

positionとは、要素の位置配置を指定するプロパティの事です。
下記のような場面で使用されます。

●要素を左から右に100px移動。上から下に100px移動したい



●要素を重ねたい



●ヘッダーメニューをスクロールしても決まった位置にヘッダーを固定したい



位置を変えたい、重ねたい、固定したい、など位置指定できるプロパティ、それが「position」です。

positionの書き方

基本記述
セレクタ {
position: 値;
}

値(基準位置の指定)と 基準からどこの位置に指定するのかを指定していきます。

「基準を決める→基準からどこの位置に指定するかを決める」
といった流れになります。
詳しくみていきます。

位置を指定する「top」「bottom」「left」「right」

positionは、基準位置を固定し。
「top」「bottom」「left」「right」で位置を調整します。

プロパティ 内容
top 基準位置から下に動かす距離
bottom 基準位置から上にに動かす距離
left 基準位置から下に動かす距離
right 基準位置左に動かす距離

指定できる値

指定する値によって位置の指定方法にオプションをつけます。
指定できる値

内容
position:static; 初期値です。通常の位置に配置され、指定することはほとんどありません。
position:relative; 現在の位置を基準に相対的な位置を決めます。 基準(現在地)から、「top」、「bottom」、「left」、「right」などで位置を調整する。
position:absolute; 親要素を基準に絶対的な位置を決めます。 基準(親要素)から、「top」、「bottom」、「left」、「right」などで位置を調整する。
position:fixed; 画面のきまった位置に固定します。 absoluteと同じく親要素を基準とした位置に配置されますが、absoluteとの違いは、画面スクロールしても位置が固定されたままになります。

それぞれの値について詳しく見てみます。

static

staticはデフォルト値になります。

●staticの特徴
1.staticは初期値、記述しなければstaticになっている。
2.要素は通常の位置、上下左右中央に動かす事ができない。
3.top,leftなどを指定できない。
4.z-index(要素の重なりを指定できない。)


staticは初期値の為、基本的に指定される事はありません、知識として知っておくだけで問題ありません。

relative

relativeは要素が本来配置される位置が基準となります。


●relativeの特徴
1.top,leftなどの位置指定ができる。
2.z-indexの指定できる。
3.基準値は、もともと配置される場所。
4.absoluteの親、基準になれる。

relative使用例(top100 left100動かす)

実際に、position:relative;を指定し位置を動かします。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
position:relative;を指定し基準を決める。
本来置かれる位置(薄い青色の四角形)を基準に、「top100」「left100」を指定し位置変更されています。

上記のように、relative;は本来配置される位置を基準に「top」「left」などを指定し位置を変更します。

absolute

absoluteは.relative(親要素)を基準に位置を決めます。

●absoluteの特徴
1.relative(親要素・基準)に対しabsolute(子要素)を指定。
2.absolute(子要素)にtop,leftで動かしたい位置を指定する。

使用例(親要素を基準に子要素位置指定)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
青四角形にrelativeを指定し親要素にする。
赤四角形にabsoluteを指定し子要素にする。
absolute「top100」 「left100」の位置を指定する事で、親要素(青四角形)を基準に子要素(赤四角形)が位置移動する事ができています。

absoluteを実用的に便利に使える場面として「画像の上に文字を載せる」「ロゴを真ん中央寄せにする」などがあります。
サンプルコードで詳しく見ていきます。

画像の上に文字を載せる

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
背景画像を指定し、背景画像にrelativeを指定し親要素にする。
p要素に文字を記載、p要素にabsoluteを指定子要素にする。
absolute「top20」 「left40」の位置を指定する事で、親要素(背景画像)を基準に子要素(文字)が位置移動する事ができています。

ロゴを真ん中央寄せにする

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
背景画像を指定し、背景画像にrelativeを指定し親要素にする。
div要素にロゴを記載、absoluteを指定し子要素にする。
absolute 「top: 0;」「bottom: 0;」「left: 0;」「right: 0;」の位置指定に「margin: auto」を組み合わせる事で、ロゴを上下左右中央寄せにする事ができています。

fixed

fixedは画面の決まった位置に要素を固定する時に使います。

fixedの特徴
1.ブラウザ画面全体が基準。
2.スクロールしても同じ位置に固定されている。
3.top,leftなどの位置指定ができる。
4.z-indexの指定ができる。

使用例(ヘッダーを画面上に固定)

サンプルコード表示動画

HTMLサンプルコード

CSSサンプルコード

※解説
スクロールしても常にヘッダーメニューが、固定されて表示されています。
これがposition: fixed;です。

position: fixed;を指定し固定したい位置に、top,leftなどを指定し固定箇所を決めます。

まとめ

今回は、要素の位置移動プロパティ「 position」に詳しく解説してきました。

最後に、ポイントをまとめます。

●positionとは
要素の位置配置を指定するプロパティ。

●positionをよく使用する場面
要素の位置変更、文字を画像に重ねる、ヘッダーの固定。

●positionの基本記述
セレクタ {
position: 値;
}

●positionの位置指定は
「top」「bottom」「left」「right」を使用し位置調整する。

●positionで指定できる値
position:static;(初期値。通常の位置に配置され、指定する。)
position:relative;(現在の位置を基準に相対的な位置を決める。)
position:absolute;(親要素を基準に絶対的な位置を決める。)
position:fixed;(画面のきまった位置に固定。)

いかがだったでしょうか?
「position」はどこを基準としているのかがポイントになってきます。
初心者の方にとって、最初は少し複雑に感じてしまいますが、
「基準位置の確認→位置指定」と流れはシンプルです。

位置の移動・固定ができれば制作の幅も広がります、ぜひ本記事を参考にしてください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。