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

最終更新日:2017年08月23日  (初回投稿日:2017年06月27日)

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

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

本日のINDEX
  1. positionプロパティの値
  2. top, right, bottom, leftプロパティの値
    1. 距離の基準になる親はpositionプロパティの値によって違う
  3. position: static が初期値。位置指定無し
  4. position: relative は ずらして表示

positionプロパティ に関しては、記事を4つに分けました。
今回は、positionプロパティ の値のうち staticrelative を見てみましょう。
「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つ並べてみました。

1
2
3

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

1
2
3

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

上のサンプルの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 を使っても、topleft などの指定をしなければ何も変化しません。

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

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

次回予告

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

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.