CSS - position - とほほのWWW入門

属性名	position
値	static \| relative \| absolute \| sticky \| center \| page \| fixed
初期値	static
適用可能要素	テーブルカラムグループとテーブルカラムを除くすべての要素
継承	継承しない
メディア	Visual
アニメーション	不可
サポート	fixed : https://caniuse.com/css-fixed sticky : https://caniuse.com/css-sticky

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS2	4.0 ※1	1.0	1.0	4.0	1.0

※1 fixed は IE7 から。

要素のポジショニングの方法を指定します。

値	説明
static	通常の位置に配置されます。top, left, right, bottom属性は意味を持ちません。
relative	要素が通常配置されるべき場所から、top, left あるいは right, bottom で指定されたオフセット分ずらされた場所に配置されます。ただし、このオフセットは、次の要素の配置に対しては影響を与えません。
absolute	親要素が position:static のときはウィンドウの左上、親要素が position:static 以外の時は親要素の左上を基準位置とし、top, left あるいは right, bottom で指定されたオフセットの絶対位置に表示します。
sticky	top と組み合わせて指定した場合、ページを下にスクロールして画面からはみ出しそうになったら、ページ上部に張り付きます。botttom と組み合わせて使用した場合はページの下部に張り付きます。
center	親要素が position:static のときはウィンドウ、親要素が position:static 以外の時は親要素の中央を基準位置とし、top, left あるいは right, bottom で指定されたオフセットの位置に表示します。
page	未稿。
fixed	通常の位置に表示されますが、ページをスクロールしても移動しません。

HTML

<h5>相対位置</h5>
<img src="../image/back.gif" alt="" style="position:static">
<img src="../image/back.gif" alt="" style="position:relative; top:10px">
<img src="../image/back.gif" alt="" style="position:static">
<h5>画面に対して絶対位置</h5>
<div>画面の右上に表示されています</div>
<img src="../image/back.gif" alt="" style="position:absolute; top:10px; right:10px">
<h5>親要素に対して絶対位置</h5>
<div style="position:relative; width:100px; height:60px; border:1px solid #666666">
  <img src="../image/back.gif" alt="" style="position:absolute; top:10px; right:10px">
</div>

表示

相対位置

画面に対して絶対位置

画面の右上に表示されています

親要素に対して絶対位置

position, top, right, bottom, left, z-index

CSS - position

概要

サポート (説明)

説明

使用例

相対位置

画面に対して絶対位置

親要素に対して絶対位置

関連項目

リンク