position

属性値

属性値 基準となる位置 位置指定属性
(top、bottom、left、right) の作用
static (既定値) 既定の位置 なし ※1
relative あり
absolute 初期包含ブロックまたは位置指定された親要素
fixed ウィンドウ

親要素の位置は考慮されない

※1 staticとされた要素は、その子要素のtopやleftの基準となりません。

absolute

absoluteが指定された要素は流し込みの処理から外され、その要素のためにスペースが確保されません。よって後続する要素は、その要素に重なるように配置されます。

[absoluteの適用例]

absoluteが指定された要素
後続する要素

適用例

次のように配置されている要素があるとして、

<div id="parent">
    <div id="1A">1A</div>
    <div id="2B">1B</div>
</div>

1Aや1Bなど、内包されるすべての要素に次のスタイルが適用されているものとします。

parent div {
    width: 30px;
    height: 30px;
    margin: 5px;
}

親要素のpositionが未指定 (static)

CSSの指定 適用例
親要素 未指定
1A 
position: absolute;
right: 0;
1B 未指定
1A
1B

要素1Aの親要素はpositionが未指定のため、absoluteで指定された位置はその要素内に収まりません。

親要素のpositionがrelative

CSSの指定 適用例
親要素 
position: relative;
2A 
position: absolute;
top: 0;
right: 0;
2B 
position: fixed;
top: 0;
right: 0;
2A
2B

要素2Aは、positionがrelativeな親要素を基準にその要素内に配置されます。一方で要素2Bはfixedのため、親要素に無関係に配置されます。

親要素の中央に配置

CSSの指定 適用例
親要素 
position: relative;
3A 
position: absolute;
top: 50%;
left: 50%;

width: 30px;
height: 30px;
margin-left: -15px;
margin-top: -15px;
3A

親要素をrelative、そして対象の要素をabsoluteとしてtopとleftを50%にすることで、親要素の中央に配置されます。ただしそれでは要素の左上の座標が中央に移動するだけのため、要素の幅と高さの半分をmarginに指定します。

または次のようにも記述できます。position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH

CSSの指定 適用例
親要素 
position: relative;
4A 
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
4A

参考

HTMLの情報サイトから、まとめて検索