Question

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

我已经尝试过使用style.position =“absolute”但它会向左或向右移动，或者根据它的位置移动最后位置从不相同的三个位置。

在这种情况下，最好使用静态，绝对，固定，相对，继承中的哪一个？并且可以提前了解特定对象如何设置到特定位置的示例

Answer 1

position: absolute告诉浏览器如何定位元素，而不是WHERE来定位元素。您仍需要在css中设置left或right以及top或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/

Answer 2

你可以让它与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";
};

Live example

Answer 3

不知道你想要做什么，但如果你没有很多可能受你选择的位置价值影响的周围html代码，那真的没关系。

以下3个小提琴做同样的事情，但微妙的区别是他们对位置属性有不同的价值。

http://jsfiddle.net/9uQT8/3/

http://jsfiddle.net/9uQT8/4/

http://jsfiddle.net/9uQT8/5/

尝试点击左中右。并看到。我使用了jQuery，超酷的JS框架。

使用style.position定位对象

3 个答案: