概要へ移動

このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)

sample-1
sample-2
sample-3
fixed
child
top
bottom
left
right
top
left
top
right
bottom
left
bottom
right
child
top
bottom
left
right
top
left
top
right
bottom
left
bottom
right
child
top
bottom
left
right
top
left
top
right
bottom
left
bottom
right
sample-1
sample-2
sample-3
sample-1
sample-2
sample-3
sample-1
sample-2
sample-3
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
div {
border: 2px solid orange; /* 境界線 */
}
.parent {
padding: 1em; /* 内側の余白 */
}
.sample {
width: 10em; /* */
height: 10em; /* 高さ */
opacity: 0.8; /* 半透明 */
border-color: gray;
}
.sample-1 {
background-color: #daa;
}
.sample-2 {
background-color: #ada;
width: 8em;
}
.sample-3 {
background-color: #aad;
height: 6em;
}
HTML : 適用するHTML
<div class="parent">
<div class="sample sample-1"> sample-1 </div>
<div class="sample sample-2"> sample-2 </div>
<div class="sample sample-3"> sample-3 </div>
</div>
実行結果
sample-1
sample-2
sample-3

positionの概要

要素の位置を指定する。

(表) positionの設定値
設定値意味対象デフォルト
static普通
relative相対的本来あるべき位置
absolute絶対的包含ブロック
fixed固定ブラウザ

このページの右下に(スクロールしても消えない)固定されたオレンジ色の要素が浮いていると思うが、これはposition: fixedで表示している。

static : 普通

デフォルト値であり、普通に表示される。(無指定の場合と同じ)

CSS : static
.sample {
position: static;
}
実行結果
sample-1
sample-2
sample-3

relative : 相対的

relativeを指定する。 これだけだとstaticと同じ。

CSS : relative
.sample {
position: relative;
}
実行結果
sample-1
sample-2
sample-3

ここでsample-2クラスにtop: 3em;を設定すると、sample-2クラスは「表示されるべきところ」から相対的に+3em下がる。
sample-1クラスとsample-3クラスには変化は無い。)

CSS : relative
.sample {
position: relative;
}
.sample-2 {
top: 3em;
}
実行結果
sample-1
sample-2
sample-3

マイナスを指定すると、上に上がる。

CSS : relative
.sample {
position: relative;
}
.sample-2 {
top: -3em;
}
実行結果
sample-1
sample-2
sample-3

これはbottomでプラスの値を指定するのと同じ。

CSS : relative
.sample {
position: relative;
}
.sample-2 {
bottom: 3em;
}
実行結果
sample-1
sample-2
sample-3

left: 3emにすると、右に+3emずれる。

CSS : relative
.sample {
position: relative;
}
.sample-2 {
left: 3em;
}
実行結果
sample-1
sample-2
sample-3

right: 3emにすると、左に+3emずれる。

CSS : relative
.sample {
position: relative;
}
.sample-2 {
right: 3em;
}
実行結果
sample-1
sample-2
sample-3

縦横を指定すると(なな)めにずれる。

CSS : relative
.sample {
position: relative;
}
.sample-2 {
right: 3em;
bottom: 2em;
}
実行結果
sample-1
sample-2
sample-3
sample-1を右下に、sample-2を左に、sample-3を上にずらしてみる。
CSS : relative
.sample {
position: relative;
}
.sample-1 {
top: 3em;
left: 2em;
}
.sample-2 {
right: 2em;
}
.sample-3 {
bottom: 3em;
}
実行結果
sample-1
sample-2
sample-3

繰り返すが、relativeの基準となる相手は「普通であれば表示される場所」であり、親要素でも上の要素でもない。

なお、重なりが下からsample-1sample-2sample-3になっているが、これを変更するのはz-index

absolute : 絶対的

とりあえず実践的なTipsとして、position: absolute;親要素はposition: relative;にしておく(← これ重要)。理由はここ

absolute の説明には下のコードから始める。

.parentにはpadding: 1emを設定しているので、1em右下にずれている。

CSS : デフォルトCSS
.parent {
position: relative;
width: 10em;
height: 10em;
border: 2px solid orange;
padding: 1em;
}
.child {
background-color: #daa;
opacity: 0.5;
width: 5em;
height: 3em;
border: 1px solid red;
}
HTML : 適用するHTML
<div class="parent">
<div class="child">
child
</div>
</div>
実行結果
child

まず、子要素のposition: absoluteを設定する。何も変化は無い。

CSS : absolute
.child {
position: absolute;
}
実行結果
child

0を指定

top: 0;にすると、子要素の上辺が親要素の上辺と一致する。

CSS : top
.child {
position: absolute;
top: 0;
}
実行結果
child

bottom: 0;にすると、子要素の下辺が親要素の下辺と一致する。

CSS : bottom
.child {
position: absolute;
bottom: 0;
}
実行結果
child

left: 0;にすると、子要素の左辺が親要素の左辺と一致する。

CSS : left
.child {
position: absolute;
left: 0;
}
実行結果
child

right: 0;にすると、子要素の右辺が親要素の右辺と一致する。

CSS : right
.child {
position: absolute;
right: 0;
}
実行結果
child

縦横に0を指定すると「角」が一致する。

親要素と子要素の「左上の角」が一致。

CSS : top left
.child {
position: absolute;
top: 0;
left: 0;
}
実行結果
child

親要素と子要素の「右上の角」が一致。

CSS : top right
.child {
position: absolute;
top: 0;
right: 0;
}
実行結果
child

親要素と子要素の「左下の角」が一致。

CSS : bottom left
.child {
position: absolute;
bottom: 0;
left: 0;
}
実行結果
child

親要素と子要素の「右下の角」が一致。

CSS : bottom right
.child {
position: absolute;
bottom: 0;
right: 0;
}
実行結果
child

0以外の指定

(復習)top: 0;にすると、childの上辺が親要素の上辺と一致する。

CSS : top
.child {
position: absolute;
top: 0;
}
実行結果
child

top: 1em;にすると、childの上辺が親要素の上辺から1em下がる。

CSS : top: 1em
.child {
position: absolute;
top: 1em;
}
実行結果
child

top: 2em;にすると、2em下がる。

CSS : top: 2em
.child {
position: absolute;
top: 2em;
}
実行結果
child

マイナス値も指定可能。(上にあがる)

CSS : top: -1em
.child {
position: absolute;
top: -1em;
}
実行結果
child
CSS : top: -2em
.child {
position: absolute;
top: -2em;
}
実行結果
child

ここまでは上辺(top)を基準にした結果である。

bottomの場合 : 下辺を基準にする

2em1em0-1em-2emと変化させる。

CSS : bottom: 2em
.child {
position: absolute;
bottom: 2em;
}
実行結果
child
CSS : bottom: 1em
.child {
position: absolute;
bottom: 1em;
}
実行結果
child
CSS : bottom: 0
.child {
position: absolute;
bottom: 0;
}
実行結果
child
CSS : bottom: -1em
.child {
position: absolute;
bottom: -1em;
}
実行結果
child
CSS : bottom: -2em
.child {
position: absolute;
bottom: -2em;
}
実行結果
child

leftの場合 : 左辺を基準にする

2em1em0-1em-2emと変化させる。

CSS : left: 2em
.child {
position: absolute;
left: 2em;
}
実行結果
child
CSS : left: 1em
.child {
position: absolute;
left: 1em;
}
実行結果
child
CSS : left: 0
.child {
position: absolute;
left: 0;
}
実行結果
child
CSS : left: -1em
.child {
position: absolute;
left: -1em;
}
実行結果
child
CSS : left: -2em
.child {
position: absolute;
left: -2em;
}
実行結果
child

rightの場合 : 右辺を基準にする

2em1em0-1em-2emと変化させる。

CSS : right: 2em
.child {
position: absolute;
right: 2em;
}
実行結果
child
CSS : right: 1em
.child {
position: absolute;
right: 1em;
}
実行結果
child
CSS : right: 0
.child {
position: absolute;
right: 0;
}
実行結果
child
CSS : right: -1em
.child {
position: absolute;
right: -1em;
}
実行結果
child
CSS : right: -2em
.child {
position: absolute;
right: -2em;
}
実行結果
child

「角」を基準とする

bottom: 3px;right: 3px;を指定すると「右下の角」が下から3px、右から3pxのところに来る。

CSS : bottom: 1em right: 1em
.child {
position: absolute;
bottom: 3px;
right: 3px;
}
実行結果
child

包含(ほうがん)ブロック

上記では直接の親要素に対するabsolute(絶対的な位置)を説明してきたが、必ずしも直接の親要素にはならない。

下のような3重の親子関係を考える。

CSS : デフォルトCSS
.parents {
border: solid orange;
padding: 1em;
}
.gg-parent {
border-color: blue;
}
.g-parent {
border-color: green;
}
.parent {
width: 8em;
height: 8em;
}
.child {
background-color: #daa;
opacity: 0.5;
width: 4em;
height: 3em;
border: 1px solid red;
}
HTML : 適用するHTML
<div class="gg-parent parents">
<div class="g-parent parents">
<div class="parent parents">
<div class="child">
child
</div>
</div>
</div>
</div>
実行結果
child

直接の親要素(.parentposition: relative;を設定した場合、.parentの右上の角にchildが移動する。

CSS : parent
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
実行結果
child

position: relative;祖父要素(.g-parent曾祖父要素(.gg-parentにすると、直接の親要素(.parentを飛び越えている。

CSS : g-parent 祖父
.g-parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
実行結果
child
CSS : gg-parent 曾祖父
.gg-parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
実行結果
child

このように、absoluteの基準となるものを包含ブロックと呼ぶ。

包含ブロックは、「positionstatic以外を指定された、もっとも近い先祖要素」になる。(繰り返すがstaticはデフォルト値である。)
つまり、absolutefixedを指定しても包含ブロックになるのだが、無駄に指定するとややこしくなる。

よって、実践的には「包含ブロックにしたい要素(=absoluteの基準にしたい要素)にposition: relative;
を設定する」ということになる。

fixed : 固定

fixed の説明には下のコードから始める。

実行結果にはオレンジ色の要素が見えている。

CSS : デフォルトCSS
.fixed {
opacity: 0.5; /* 半透明 */
width: 4em; /* */
height: 4em; /* 高さ */
background-color: orange;
}
HTML : 適用するHTML
<div class="fixed">
fixed
</div>
実行結果
fixed

これに以下のCSSを追加で設定する。

そうすると、オレンジの要素がブラウザの右下に固定されて表示されているであろう。
(このページに来た時から、ずっと浮いているハズ)

CSS : fixed
.fixed {
position: fixed;
bottom: 1em;
right: 1em;
z-index: 800;
}
実行結果
fixed

position: absolute;では包含ブロックに対して絶対的な位置になるように。
position: fixed;ではブラウザに対して絶対的な位置になる。

上記コードではbottom:right:で右下から1emのところに固定しているが、top:left:も使える。
これらの指定方法はposition: absolute;と同じであるので省略。

z-index: 800;を指定しているがその説明は下

topbottomleftright

すでにrelativeabsoluteで説明したが、復習を兼ねてまとめておく。

position基準topbottomleftright
static(なし)無効無効無効無効
relative本来あるべき位置↓(下)↑(上)→(右)←(左)
absolute
fixed
包含ブロック
ブラウザ
上辺から ↓(下)下辺から ↑ (上)左辺から →(右)右辺から ←(左)

relative の場合

下のコードから始める。真ん中が「本来あるべき位置」。

CSS : デフォルト
div {
border: 1px solid gray;
}
.parent {
border-color: orange;
border-width: 2px;
padding: 4em;
}
.child {
position: relative;
background-color: #daa;
width: 3em;
height: 2em;
border-color: red;
}
HTML : 適用するHTML
<div class="parent">
<div class="child" > child </div>
</div>
本来あるべき位置
child

topbottomleftright を指定してみる。

CSS : top
.child {
top: 3em;
}
下に移動
child
CSS : bottom
.child {
bottom: 3em;
}
上に移動
child
CSS : left
.child {
left: 3em;
}
右に移動
child
CSS : right
.child {
right: 3em;
}
左に移動
child

縦と横を指定すると、斜めに移動する。

CSS : top left
.child {
top: 3em;
left: 3em;
}
右下に移動
child
CSS : top right
.child {
top: 3em;
right: 3em;
}
左下に移動
child
CSS : bottom left
.child {
bottom: 3em;
left: 3em;
}
右上に移動
child
CSS : bottom right
.child {
bottom: 3em;
right: 3em;
}
左上に移動
child

absolutefixed の場合

下のコードから始める。

CSS : デフォルト
div {
border: 1px solid gray;
}
.parent {
position: relative;
border-color: orange;
border-width: 2px;
padding: 11em;
}
.children {
background-color: #daa;
opacity: 0.7;
width: 4em;
height: 4em;
border-color: red;
}
HTML : 適用するHTML
<div class="parent">
<div class="children" > child </div>
<div class="children top" > top </div>
<div class="children bottom" > bottom </div>
<div class="children left" > left </div>
<div class="children right" > right </div>
<div class="children top-left" > top<br>left </div>
<div class="children top-right" > top<br>right </div>
<div class="children bottom-left" > bottom<br>left </div>
<div class="children bottom-right" > bottom<br>right </div>
</div>
実行結果
child
top
bottom
left
right
top
left
top
right
bottom
left
bottom
right

子要素にposition: absolute;を指定すると、全ての子要素は重なる。

(子要素の左上の角が親要素の中心に来ている(← つまり、子要素が中心から外れている)。これはabsoluteになると親要素は子要素が存在しないものとして配置されるため。)

CSS : position: absolute
.children {
position: absolute;
}
実行結果
child
top
bottom
left
right
top
left
top
right
bottom
left
bottom
right

0にすると、それぞれの角と辺に張り付く。

CSS : ゼロ
.children {
position: absolute;
}
.top { top: 0; }
.bottom { bottom: 0; }
.left { left: 0; }
.right { right: 0; }
.top-left { top: 0; left: 0; }
.top-right { top: 0; right: 0; }
.bottom-left { bottom: 0; left: 0; }
.bottom-right { bottom: 0; right: 0; }
実行結果
child
top
bottom
left
right
top
left
top
right
bottom
left
bottom
right

正の値を設定すると、(包含ブロックの)内側に移動する。

CSS : 正の値
.children {
position: absolute;
}
.top { top: 2em; }
.bottom { bottom: 2em; }
.left { left: 2em; }
.right { right: 2em; }
.top-left { top: 2em; left: 2em; }
.top-right { top: 2em; right: 2em; }
.bottom-left { bottom: 2em; left: 2em; }
.bottom-right { bottom: 2em; right: 2em; }
実行結果
child
top
bottom
left
right
top
left
top
right
bottom
left
bottom
right

負の値を設定すると、(包含ブロックの)外側に移動する。

CSS : 負の値
.children {
position: absolute;
}
.top { top: -1em; }
.bottom { bottom: -1em; }
.left { left: -1em; }
.right { right: -1em; }
.top-left { top: -1em; left: -1em; }
.top-right { top: -1em; right: -1em; }
.bottom-left { bottom: -1em; left: -1em; }
.bottom-right { bottom: -1em; right: -1em; }
実行結果
child
top
bottom
left
right
top
left
top
right
bottom
left
bottom
right

まとめると、

正の値内側に移動
負の値外側に移動

fixedは(包含ブロックではなく)ブラウザになることだけが異なる。

z-index : 重なりの順番

重なりの上下関係は後で指定されたものが上になるので、下からsample-1sample-2sample-3の重なりになっている。

CSS : relative
.sample {
position: relative;
opacity: 1;
}
.sample-1 {
top: 7em;
left: 2em;
}
.sample-2 {
right: 2em;
}
.sample-3 {
bottom: 4em;
}
HTML : 適用するHTML
<div class="parent">
<div class="sample sample-1"> sample-1 </div>
<div class="sample sample-2"> sample-2 </div>
<div class="sample sample-3"> sample-3 </div>
</div>
実行結果
sample-1
sample-2
sample-3

これを変更するにはz-indexプロパティを指定する。

デフォルトは0であり、大きな数字ほど、上に重ねられる。

とりあえず、.sample-2z-index700にすると、sample-2が最前面に出る。

CSS : sample-2
.sample-2 {
z-index: 700;
}
実行結果
sample-1
sample-2
sample-3

.sample-1z-index: 710にする。(sample-1が最前面)

CSS : sample-1
.sample-1 {
z-index: 710;
}
.sample-2 {
z-index: 700;
}
実行結果
sample-1
sample-2
sample-3

.sample-3z-index: 720にする。(sample-3が最前面)

CSS : sample-3
.sample-1 {
z-index: 710;
}
.sample-2 {
z-index: 700;
}
.sample-3 {
z-index: 720;
}
実行結果
sample-1
sample-2
sample-3

Emmet : pos

記述Visual Studio Code
posposition: relative;
posaposition: absolute;
posfposition: fixed;
ttop: ;
bbottom: ;
lleft: ;
rright: ;
zz-index: ;