style.positionは、要素のスタイル属性のpositionプロパティの値を取得、もしくは、設定するプロパティ。
positionプロパティは、ボックス要素を配置するときに基準とさせたい位置を指定することができる。
配置は、topプロパティ、leftプロパティ、bottomプロパティ、rightプロパティで指定する。
構文
取得
var $position = $elementReference.style.position;
戻り値
要素のスタイル属性のpositionプロパティの値。
設定
$elementReference.style.position = "static | relative | absolute | fixed | inherit";
- static | relative | absolute | fixed | inherit
- ボックス要素を配置するときに基準とする位置を指定。
- 下記の何れかの値を指定する。初期設定値は「static」。
- static：定位置。topプロパティ、leftプロパティ、bottomプロパティ、rightプロパティによる配置指定は無視する。
- relative：定位置の左上端を基準とする。
- absolute：positionプロパティで「static」以外を最初に指定した祖先要素の左上端を基準とする。「static」以外を指定した祖先要素がない場合、ウィンドウ全体の左上端を基準とする。
- fixed：ウィンドウの表示領域の左上端を基準とする。スクロールしても追随しないように位置を固定する。
- inherit：親要素の設定を継承。
サンプル
サンプルボックス要素
変更後のpositionプロパティの値：
サンプルの動作について
- 「定位置に配置」ボタンをクリックすると、定位置に「サンプルボックス要素」を配置し、「変更後のpositionプロパティの値：」の右横に「static」と表示する。
- 「相対的配置」ボタンをクリックすると、定位置から下に「10px」、右に「10px」の位置に「サンプルボックス要素」を配置し、「変更後のpositionプロパティの値：」の右横に「relative」と表示する。
- 「絶対的配置」ボタンをクリックすると、ウィンドウ全体の左上端に「サンプルボックス要素」を配置し、「変更後のpositionプロパティの値：」の右横に「absolute」と表示する。
- 「絶対的配置＆位置固定」ボタンをクリックすると、ウィンドウの表示領域の左上端に「サンプルボックス要素」を配置し、スクロールしても消えないように固定し、「変更後のpositionプロパティの値：」の右横に「fixed」と表示する。
- 「継承」ボタンをクリックすると、「サンプルボックス要素」の上下左右のマージンを親要素から継承し、「変更後のpositionプロパティの値：」の右横に「inherit」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setPosition( $position ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.position = $position;
var $position = $elementReference.style.position;
document.getElementById( "sampleOutput" ).innerHTML = $position;
}
</script>
function setPosition( $position ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.position = $position;
var $position = $elementReference.style.position;
document.getElementById( "sampleOutput" ).innerHTML = $position;
}
</script>
HTML
<div style="border: 1px solid blue; background-color: pink; margin: 18px; width: 400px; height: 200px;">
<div id="sample" style="position: relative; top: 10px; left: 10px; border: 1px solid red; background-color: yellow; width: 200px; height: 100px;">
サンプルボックス要素
</div>
</div>
<button onclick="setPosition('static');">定位置に配置</button>
<button onclick="setPosition('relative');">相対的配置</button>
<button onclick="setPosition('absolute');">絶対的配置</button>
<button onclick="setPosition('fixed');">絶対的配置＆位置固定</button>
<button onclick="setPosition('inherit');">継承</button>
<br />
<p>変更後のpositionプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="position: relative; top: 10px; left: 10px; border: 1px solid red; background-color: yellow; width: 200px; height: 100px;">
サンプルボックス要素
</div>
</div>
<button onclick="setPosition('static');">定位置に配置</button>
<button onclick="setPosition('relative');">相対的配置</button>
<button onclick="setPosition('absolute');">絶対的配置</button>
<button onclick="setPosition('fixed');">絶対的配置＆位置固定</button>
<button onclick="setPosition('inherit');">継承</button>
<br />
<p>変更後のpositionプロパティの値：<span id="sampleOutput"></span></p>