Style position 属性

定義と使用方法

position 属性設定または要素の位置メソッドのタイプ（静的、相対的、絶対的または固定）を返します。

参照してください：

CSS チュートリアル：CSS 位置

CSS リファレンスマニュアル：position 属性

例

例 1

<div>要素の定位を相対定位から絶対定位に変更する：

document.getElementById("myDIV").style.position = "absolute";

自分で試してみる

例 2

異なる定位タイプを使用する：

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

自分で試してみる

例 3

<h2>要素の定位を返します：

alert(document.getElementById("myH2").style.position);

自分で試してみる

文法

position 属性の返り値：

object.style.position

position 属性の設定：

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

属性値

値 説明
static 要素はドキュメント内で現れる順序に応じて表示されます。デフォルト。
absolute 要素は最初に定位された（非静态の）祖先要素に対して定位されます。
fixed 要素はブラウザのウィンドウに対して定位されます。
relative

要素はその通常位置に対して定位されます。

したがって「left:20」は要素の左側位置を20ピクセル増やします。
sticky

要素はユーザーのスクロール位置に応じて定位されます。

粘着要素はスクロール位置に応じて相対定位と固定定位の間で切り替わります。

これは相対的な定位であり、視口内で指定されたオフセット位置に達するまでであり、その後は適切な位置に「粘着」します（例えば position:fixed）。

注記：IE/Edge 15 以降のバージョンではサポートされていません。Safari は 6.1 版から Webkit 接頭辞をサポートしています。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： static
返り値： 文字列、要素の位置の種類を表す。
CSS バージョン： CSS2

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート