ほんっとにはじめてのHTML5とCSS3：【22-1】位置指定の positionと top, right, bottom, leftプロパティ

【22-1】位置指定の positionと top, right, bottom, leftプロパティ

最終更新日：2017年11月16日　（初回投稿日：2017年06月27日）

positionプロパティは要素の位置を操作できるプロパティです。
HTML文書上の各要素は、普通は「書いた順」で表示され、画面をスクロールすればみんな一緒にスクロールされます。
これを、本来の位置からずらして表示したり、親要素を基準にした特定の位置に置いたり、画面をスクロールしても固定の位置にしたりできるプロパティです。

位置は基準になるモノの「上から、右から、下から、左から」の距離で指定するので、top、right、bottom、leftプロパティ も用意されています。
これらは必ず positionプロパティと一緒に使います（単独で使ってもなんにも起こらない）

本日のINDEX

positionプロパティ に関しては、記事を4つに分けました。
今回は、positionプロパティ の値のうち static、relative を見てみましょう。
「absolute」「 fixed」「sticky」は次回以降に続きます。

【22-1】位置指定の positionと top, right, bottom, leftプロパティ　←今日はココ: positionプロパティの値と、top, right, bottom, leftプロパティの値の紹介。positionプロパティのうち static, relative を使います。
【22-2】要素を絶対位置に指定する position: absolute: position: absolute を使う時のコツと、コレを使った要素の装飾をいくつか。
【22-3】要素を固定位置に指定する position: fixed: position: fixed の特徴や使用例、<header> を固定位置にした時のページ内リンクのズレの解消など。
【22-4】スクロールしていくとピタッと固定する position: sticky: position: sticky はスクロールしていくと必要なところで要素がピタッと止まります。

参考：
こちら↓はドラフトですが、新しい値「position: sticky」が載っています。
CSS Positioned Layout Module Level 3 -- W3C Working Draft, 17 May 2016
勧告済みの CSS2 はこちら↓
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work -- 9 Visual formatting model

positionプロパティの値

positionプロパティの値の一覧です。

static	これがデフォルト値。位置指定無しです。普通にHTMLで書いたまんま表示します。
relative	HTMLで書いたまんま配置した後に、位置指定していない他のレイアウトを維持したまま、位置指定した要素の位置を変えます。相対位置指定と言います。
absolute	HTMLで書いた他の要素との位置関係から切り離されて、スペースも詰められちゃいます。で、親要素からの上下左右の距離で位置を決めます。絶対位置指定と言います。
fixed	absolute と同じで HTMLで書いた他の要素との位置関係から切り離され、スペースも詰められちゃいます。こちらは画面（ビューポート）を基準に位置を決めますので、スクロールしても位置が変わりません。固定位置指定と言います。
sticky	相対位置指定と固定位置指定の組み合わせ。画面をスクロールすると、他の要素とともに相対位置でスクロールされますが、指定の位置まで来ると固定されます。 ★これはまだ草案で、IE や Opera は未実装です（2017年6月記）

値の継承	なし	適用できる要素	全要素ただし、テーブル関連のセルやセルのグループ <tr> <th> <td> <thead> <tbody> <tfoot> <colgroup> <col> などには使えません

テーブルの中身の要素には効きません。（ <table>要素には使えます）
CSSの displayプロパティでテーブルの中身の性質に変えた要素も同じです。（table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption を指定した要素）

テーブルに関してはこちらをご覧ください。
[16-1] table（表）を作ろう（まずは基本の table, tr, th, td）
【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく

top, right, bottom, leftプロパティの値

この4つのプロパティは、位置指定された要素（Positioned elements）に位置を指定するためのプロパティです。
ですので position: static 以外の potision指定した要素にしか使えません。
位置は、距離の基準となる親の「上辺」「右辺」「下辺」「左辺」からの距離で指定します。

auto	これがデフォルト値。値が自動計算されます。（特に指定しなければautoになる）例えば、top: 10px と指定したら、要素は下に向かって 10px ずれますが、bottom に「-10px」なんてわざわざ指定しなくても、何も書かなきゃ bottom: auto 。自動計算されて勝手に「-10px」になるということです。上下左右の指定したい部分だけ指定して、あとはほっとけばautoになります。
数値	px や em などの単位を付けて指定します。マイナスの値も使えます。
%	top、bottom なら親の高さに対して、right、left なら親の幅に対してのパーセントで指定。マイナスの値も使えます。

値の継承	なし	適用できる要素	位置指定された要素（position: static 以外の potision指定した要素）

距離の基準になる親はpositionプロパティの値によって違う

top, right, bottom, left の値はとにかく「親からの距離」なんですが、この親が positionプロパティの値によって違います。

相対位置指定（position: relative）の場合なら、本来（位置指定しなかった時）の位置が親。そこからずらす距離を指定します。
絶対位置指定（position: absolute）の場合、一番近い先祖の position指定した要素が親。先祖のどれにも位置指定していなければ、自動的に <body>要素が親になります。
固定位置指定（position: fixed）の場合、親は画面（ビューポート）になります。PCブラウザならウィンドウが親ってかんじ。詳しくは position: fixed の記事で。
position: sticky の場合は、親の中でスクロールする要素に対して使えるので、スクロールする範囲（を特定している要素）が親になります。詳しくは position: sticky の記事で。

position: static が初期値。位置指定無し

positionプロパティの値のうちの、まずはデフォルト値の position: static について。
static（スタティック。スターティックかな）は「静的な」といった意味。

これは位置指定無しの状態。 HTMLで書いたまんま表示します。
というわけで当然 top、right、bottom、left、z-indexプロパティといった具体的な位置を決めるプロパティは、一緒に使ってもなんにも起こりません。（z-index は後日近いうちにやります）

positionの指定をした要素を、元の通常の「位置指定無し」の状態に戻したい時、これを使います。
例えば、まとめて position: absolute を指定した要素の中の1つだけ位置指定をやめたい時とか、スマホなどのデバイスでは位置指定をやめたいときなどですね。

position: relative はずらして表示

position: relative は、HTMLで書いたまんま配置した後に、位置指定していない他のレイアウトを維持したまま、位置指定した要素の位置を変えます。
relative（リレイティブって読みたいところだけど、リラティブのほうが正しいのかな？）は「相対的な」といった意味。

「もともと置かれるはずの位置」からの相対位置に要素をずらします。
もともと置かれるはずの位置の「スペース」はそのまま残ります。

下のサンプルを見てください（これはまだ何にも position指定してません）
<div>要素を3つ並べてみました。

2番目のボックスだけ position: relative を指定してみるとこんなかんじ（色も変えました）

重なり具合は、後に書いた要素より上になるんですね。親要素の囲み罫も超えてずれています。位置だけがずれると言うより、一枚上のレイヤーにあがってずれるってかんじですね。

上のサンプルのHTMLとCSSです。topは -30px、leftを 30pxずらしています。

<div class="smp1">
 <div class="smp1box">1</div>
 <div class="smp1box p-relative">2</div>
 <div class="smp1box">3</div>
</div>

<style>
div.smp1 {margin:0; padding:10px; border:solid 1px #ccc; font-size:0}
.smp1box {
	-webkit-box-sizing: border-box;
    box-sizing: border-box; /*box-sizing*/
	display:inline-block; /*横並びに*/
	width:25%;
	margin:0 10px 0 0;
	background:#FC9;
	text-align:center;
	padding:1em;
	font-size:large}
.p-relative {
	position:relative;
    top:-30px;
    left:30px;
    background:#9C6}
</style>

このサンプルのように display:inline-block を指定してる要素の中の1つだけちょっとずらすのって、ネガティブマージンだと不可なんだよね。こんな時に position: relative は便利です。

ちなみに、 position: relative を使っても、top や left などの指定をしなければ何も変化しません。

.p-relative2 {
	position:relative;
    /*
    top:-30px;
    left:30px; 
    （topとleftの指定をコメントアウトしています）*/
    background:#9C6}

position: absolute（絶対位置指定）を使う時、親要素にも position指定が必要（そうじゃなければ <body> が親になる）なので、たいていは、この position: relative を親要素に使います。
そんな時 top、right、bottom、left で距離の指定をしなければ位置は「ずれない」のよね。親要素には特に位置指定したくない時のほうが多いから、これは覚えておくべき。

次回予告

それでは次回は position: absolute（絶対位置指定）を使ってみましょう。
切り貼りするような感じで要素の位置を変更できるので、装飾などにもよく使われます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。