Javascript 使用style.position进行对象定位

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

我试过使用style.position=“absolute”，但它会向左或向右移动，或者根据它的位置选择任何位置。最后一个位置永远不会是相同的三个位置

---

在这种情况下，静态、绝对、固定、相对和继承哪一种最适合使用？而且，是否有可能获得一个特定对象如何被设置到特定位置的示例，这要归功于提前

位置：绝对

告诉浏览器如何定位元素，而不是将元素定位到何处。您仍然需要通过在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>​

你可以这样移动物体：

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

---

代码发布在：

您可以使用绝对版，但我认为相对版可能在您的情况下效果最好

HTML

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

---

我不知道你想做什么，但是如果你周围没有太多html代码会受到位置值选择的影响，那就真的没关系了

以下三个小提琴做相同的事情，但有细微的区别，他们有不同的位置属性值

---

尝试单击左、中、右。看看。不过我使用了jQuery，这是一个超级酷的JS框架。

在jsfiddle.net上用你已经尝试过的东西做了一个演示。你为什么不试一下每一个呢？这样你就可以为将来的工作提供信息。没有一行代码的问题通常是无法回答的。有很多细节你没有分享。你的很多问题都会降低投票率，请在提问时更加小心，以便其他人可以更轻松地帮助你。还要记住，要使绝对样式起作用，元素必须是

绝对

或

相对

@JuanMendes元素的子元素，这一点很好。您的评论在代码发布之前就已经发布了，但我想我已经涵盖了这一点。：）在您的情况下，这很好，因为绝对定位的

div

是

主体的子对象。我只是警告OP，以防他的div被嵌套。@JuanMendes，实际上，在我的代码中，div不是主体的子元素，包含的元素被标记为“relative”…ooops，我想我在考虑Xeon06的答案，我对其进行了评论：P修改了示例，以显示使用CSS进行定位的替代方案。很抱歉，我的问题不清楚，我是新手。如何将其与svg而不是css结合使用？
<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">

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

input {
    padding: 4px;
}

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