javascript - style.position によるオブジェクトの配置

Question

オブジェクトをある位置から別の位置に移動できるようにするには、たとえば、左右と中央の 3 つのボタンを使用して、オブジェクトを常にまったく同じ位置に配置します。

style.position="absolute" を使用してみましたが、最後の位置に応じて左または右または任意の位置に移動し、同じ 3 つの位置になることはありません。

この場合、静的、絶対、固定、相対、継承のどれを使用するのが最適ですか? 特定のオブジェクトが特定の位置に設定される方法の例を取得することは可能ですか?

score 1 · Accepted Answer

position: absolute要素を配置する方法をブラウザに伝えますが、要素を配置する場所は伝えません。CSS でleftorrightおよびtoporの値を設定して、要素を配置する必要があります。bottom

いくつかのマークアップが与えられた場合:

<button id="left">LEFT</button>
<button id="right">RIGHT</button>
<button id="center">CENTER</button>
<div id="wrapper">
    <div id="thingy"/>
</div>

そしていくつかのスタイル:

#wrapper {
    position: relative;
    margin-top: 10px;
}

#thingy {
    margin: 0 auto;
    width: 25px;
    height: 25px;
    background-color: #f69;
}

この方法で物を動かすことができます：

var thingy = document.getElementById('thingy');

document.getElementById('left').onclick = function() {
    thingy.style.position = 'absolute';
    thingy.style.right = null;
    thingy.style.left = 0;
};

document.getElementById('right').onclick = function() {
    thingy.style.position = 'absolute';
    thingy.style.left = null;
    thingy.style.right = 0;
};

document.getElementById('center').onclick = function() {
    thingy.style.position = 'inherit';
    thingy.style.left = null;
    thingy.style.right = null;
};

コードはhttp://jsfiddle.net/TXWfh/1/に投稿されています。

score 1 · Accepted Answer

で動作させることもできますがabsolute、あなたの場合は相対が最もうまくいくと思います。

HTML

<div id="test"></div>
<input type="button" id="left" value="Left">
<input type="button" id="middle" value="Middle">
<input type="button" id="right" value="Right">

CSS

#test {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
}

input {
    padding: 4px;
}

JavaScript

var test = document.getElementById("test");

document.getElementById("left").onclick = function() {
    test.style.left = "0px";
};

document.getElementById("middle").onclick = function() {
    test.style.left = "250px";
};

document.getElementById("right").onclick = function() {
    test.style.left = "500px";
};

実際の例