javascript - 使用 style.position 定位对象

Question

我希望能够使用按钮将对象从一个位置移动到另一个位置，例如左右和中心的 3 个按钮，每次总是将对象放在完全相同的位置。

我试过使用 style.position="absolute" 但它向左或向右移动或任何位置取决于它最后一个位置永远不会是相同的三个位置。

在这种情况下，最好使用静态、绝对、固定、相对、继承中的哪一个？是否有可能提前获得一个特定对象如何设置到特定位置的示例

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，但我认为 relative 可能最适合你的情况。

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";
};

活生生的例子