Help us understand the problem. What is going on with this article?

CSSで位置を調整・固定するpositionの指定方法 byウェブカツ

CSSでの位置指定は、webサイト作りの基本中の基本。
見栄えを良くするために、要素の位置を自由に決めたい場面は多い。

だが、HTML/CSSを学習し始めた方には分かりにくい部分でもある。

そこで今回は、CSSで要素の位置を調整するときに使うpositionプロパティについて解説する。

positionとは

positionとは、要素の位置を決めるためのプロパティのこと。

HTMLのブロック要素は基本的に縦並びで、floatやflexboxなどを使う事で横並びにする事ができる。
大まかなレイアウトはこれで対応できるが、細かく要素の位置を指定したいときにはpositionを利用する。

CSSで位置を指定する書き方

positionの書き方

positionプロパティはこう書く。

要素 {
position: 値;
}

 

値の部分には「static」「relative」「absolute」「fixed」のどれかが入る。この値によって「どの様にして位置を決めるのか」を指定することができる。

  • static: positionの初期値。位置を決める方法を指定ない。
  • relative: 今の位置を基準として、相対的な位置を決める。
  • absolute: static以外のpositionが指定された親要素の位置を基準として、絶対的な位置を決める。
  • fixed: ブラウザウィンドウを基準として、絶対的な位置を決める。画面をスクロールしてもその場所に固定されたまま。

位置を調整するtop・bottom・left・rightの使い方

positionの値で指定した位置の決め方に従い、実際にどれだけ動かすのかを決めるのが 「top」「bottom」「left」「right」。

  • top: 指定した位置の「上」からどれだけ動かすかを決める
  • bottom: 指定した位置の「下」からどれだけ動かすかを決める
  • left: 指定した位置の「左」からどれだけ動かすかを決める
  • right: 指定した位置の「右」からどれだけ動かすかを決める

実際に指定するときは、positionと組み合わせて「top, bottomのどちらか」「left, rightのどちらか」を指定する。

例えば、「sample」というクラスの要素を今の位置を基準として上から10px, 左から20pxのところに要素を移動する場合は、以下の様にCSSを記述。

CSS

.sample {
position: relative; /* 今の位置を基準 */
top: 10px; /* 上から10px */
left: 20px; /* 左から20px */
}

 

この値はposition: staticの時には指定することができないので注意。

positionの値と位置指定の方法

ここからはもう少し詳しく、positionの値によって要素がどう動くのかを説明する。

position:static - CSSで何も記載しないときの初期値

staticはpositionの初期値。CSSで何もしていないときはこの値になっている。

例えば、縦横が300pxの赤い要素と、縦横が100pxの黒い要素(今回はdiv)をstaticを使って配置してみよう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>sample</title>
</head>
<body>
<div class="red"></div>
<div class="black"></div>
</body>
</html>

 

CSS

.red {
width: 300px;
height: 300px;
background: #d7263d;
position: static; /* staticを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: static; /* staticを指定 */
}

 

結果

この様に、縦にすき間無く並んだ状態になる。

staticは、位置や重なり(z-index)を指定しても反映されない。
例えば黒の要素を右へ10px動かそうと

.black {
width: 100px;
height: 100px;
background: #02182b;
position: static; /* staticを指定 */
left: 10px; /* 左から10px移動する */
}

と書いても移動しないので、要素を移動させたい場合は、relativeやabsoluteにする

position:relative - 相対的に位置を移動させたい時に利用


relativeは、今の位置を基準として、相対的な位置を決めるときに使う。


まずはrelativeを指定してみよう。
(HTMLはstaticと同じなので省略)

CSS

.red {
width: 300px;
height: 300px;
background: #d7263d;
position: relative; /* relativeを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: relative; /* relativeを指定 */
}

 

結果

見た目はstaticと変わらない。
では、ここから黒い要素を「上から10px」「左から20px」動かしてみよう。

CSS

.red {
width: 300px;
height: 300px;
background: #d7263d;
position: relative; /* relativeを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: relative; /* relativeを指定 */
top: 10px; /* 上から10px移動 */
left: 20px; /* 左から20px移動 */
}

 

結果

赤い要素にピッタリくっついて並んでいた黒い要素が、本来の表示位置から移動したのが分かるだろうか。

この様に、position:relativeはstaticと比較して

  • top・bottom・left・rightを指定しなければstaticと同じ見た目になる
  • top・bottom・left・rightを指定すると、位置を調整できる

という違いがあることを覚えておこう。

position:absolute - 親要素を基準として絶対的な位置を調整

position:absoluteは、親要素の位置を基準として絶対的な位置を決める事ができる。

まずは幅400px、高さ300pxのグレーの親要素の中に、1辺が150pxの赤い箱と1辺が100pxの黒い箱の要素を入れよう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet"href="style.css" />
<title>sample</title>
</head>
<body>
<div class="parent">
<div class="red"></div>
<div class="black"></div>
</div>
</body>
</html>
 

CSS

.parent {
width: 400px;
height: 300px;
background: #e8e8e8;
}

.red {
width: 150px;
height: 150px;
background: #d7263d;
}

.black {
width: 100px;
height: 100px;
background: #02182b;
}

 

結果

postionを何も指定しないと、グレーの要素の中に、赤い要素と黒い要素が縦に並ぶ形になる。

では、黒い要素の位置をabsoluteにし、左上を基準とするためにtopとleftを0にしよう。
absoluteは「親の要素がstatic以外の時に、親要素を基準とする」ので、親要素であるparentにrelativeを付ける。

CSS

.parent {
width: 400px;
height: 300px;
background: #e8e8e8;
position: relative; /* 親要素にrelativeを指定 */
}

.red {
width: 150px;
height: 150px;
background: #d7263d;
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: absolute; /* 子要素はabsoluteを指定 */
top: 0; /* 上を基準 */
left: 0; /* 左を基準 */
}

 

結果

黒い要素の左上が、グレーの要素の左上と重なるように移動した。
今回はtopとleftを指定したため、基準が「親要素の左上」になっているが、例えば親要素の左下を基準としたい場合はこのように書く。

CSS

.black {
width: 100px;
height: 100px;
background: #02182b;
position: absolute; /* 子要素はabsoluteを指定 */
bottom: 0; /* 下を基準 */
left: 0; /* 左を基準 */
}

 

結果

この様にabsoluteは他の要素は無視して、親要素を基準とした絶対的な位置を指定することができる。

position:fixed - 位置を固定

position:fixedは、画面を基準とした位置に要素が固定される
例えばスクロールしても位置が変わらないヘッダーや、縦に長いページでよく見かける「上に戻る」ボタンなどで利用されている。

指定方法はabsoluteと同じだが、基準が親要素では無くブラウザウィンドウである事に注意。

positionを使った位置調整を練習しよう

CSSで思い通りに位置を動かせるようになるためには、実際にコードを書いてみるのが一番である。

ウェブカツでは、HTML/CSSの基礎を練習できる鬼練を無料で公開しているので、チャレンジしてみよう。
https://webukatu.com/wordpress/blog/1833

かずきち

プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何?」という状態から3ヶ月の独学のみでエンジニアへ転職し、1年で年収1千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/

kazukichi
元競売屋と保険営業のエンジニア。 TwitterでNo1人気のWEBプログラミング学習サービス『ウェブカツ!!』や、WordPressテンプレ販売『CRAZY WP』など多数運営。 http://webukatu.com/ http://crazy-wp.com/
https://webukatu.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした