HTML DOM Style positionプロパティとは？使い方と設定値を解説

HTML DOM Styleのpositionプロパティは、HTMLドキュメント内の要素の配置方法（ポジショニング）を取得および変更するために使用されるプロパティです。

構文

positionプロパティの基本的な構文は以下のとおりです。

1. position値の取得

object.position

2. position値の変更

object.position = "value"

valueには以下の値を指定できます。

番号	値と説明
1	initial このプロパティの値をデフォルト値に設定します。
2	inherit 親要素からこのプロパティの値を継承します。
3	static 要素はドキュメントフローに従い、記述された順序どおりに表示されます。これが初期値です。
4	absolute 要素は、ドキュメント内で最初にpositionが指定された祖先要素を基準として配置されます。
5	fixed 要素はブラウザウィンドウを基準として配置され、スクロールしても画面上の同じ位置に固定されます。
6	relative 要素は、通常の表示位置を基準として相対的に配置されます。
7	sticky 要素はユーザーのスクロール位置に応じて配置されます。スクロールに追従して固定表示させたい場合に便利です。

それでは、HTML DOM Style positionプロパティの具体的な使用例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem 0;
    }
    .square {
        width: 100px;
        height: 100px;
        background: #db133a6b;
        top: 150px;
        left: 50%;
    }
    .show {
        font-size: 1.2rem;
        margin: 1rem 0;
    }
</style>
<body>
<h1>DOM Style position Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set Position</button>
<script>
    function set() {
        document.querySelector('.square').style.position = "fixed";
    }
</script>
</body>
</html>

実行結果

ページを開くと、ピンク色の半透明な正方形が表示されます。

「Set Position」ボタンをクリックすると、JavaScriptによって正方形のpositionプロパティが「fixed」に設定され、要素がブラウザウィンドウを基準に固定配置されます。その後ページをスクロールしても、正方形は画面上の同じ位置に留まり続けます。

このように、positionプロパティを使いこなすことで、要素の自由なレイアウトや、ヘッダー・ナビゲーションの固定表示など、さまざまなUI表現が可能になります。

HTML DOM Styleのrightプロパティとは？使い方と構文をわかりやすく解説

HTML DOM StyleのtransitionTimingFunctionプロパティとは？構文と使い方を徹底解説

HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説
HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。値説明
HTML DOMのStyle leftプロパティとは？使い方とサンプルコードを解説
HTML DOM Style leftプロパティとはHTML DOMのleftプロパティは、位置指定された要素の「左からの位置」を設定または取得するために使用されます。なお、このプロパティで要素の位置を制御するには、対象要素のCSS positionプロパティが relative、absolute、fixed のいずれかに設定されている必要があります。構文leftプロパティを設定する際の構文は以下の通りです。object.style.left = auto|length|%|initial|inherit;指定できる値の一覧値説明autoデフォルト値です。左位置はブラウザが自動的に決定します。