javascript 使用 style.position 定位对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10143694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
object positioning with style.position
提问by Len
I want to be able to move an object from one position to another using buttons for example 3 buttons left right and center that always put the object at the exact same positions everytime.
我希望能够使用按钮将对象从一个位置移动到另一个位置，例如左右和中间的 3 个按钮，每次总是将对象放在完全相同的位置。
I have tried using style.position="absolute" but it moves left or right or whatever position depending on it last position never the same three positions.
我曾尝试使用 style.position="absolute" 但它向左或向右移动或任何位置取决于它的最后位置永远不会相同的三个位置。
Which one of static, absolute, fixed, relative, inherit would be best to use in this case? and is it possible to get an example of how a particular object would be set to a particular position thanks in advance
在这种情况下，最好使用静态、绝对、固定、相对、继承中的哪一个？是否有可能提前获得一个示例，说明如何将特定对象设置到特定位置
回答by Prestaul
position: absolutetells the browser HOW to position your element, but not WHERE to position your element. You still need to position your element by setting leftor rightand topor bottomvalues in your css.
position: absolute告诉浏览器如何定位您的元素，而不是告诉浏览器在哪里定位您的元素。您仍然需要通过在 css 中设置leftorright和toporbottom值来定位元素。
Given some markup:
给定一些标记：
<button id="left">LEFT</button>
<button id="right">RIGHT</button>
<button id="center">CENTER</button>
<div id="wrapper">
<div id="thingy"/>
</div>?
and some styles:
和一些风格：
#wrapper {
position: relative;
margin-top: 10px;
}
#thingy {
margin: 0 auto;
width: 25px;
height: 25px;
background-color: #f69;
}?
You can move the thingy this way:
你可以这样移动东西：
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;
};
?
Code is posted at: http://jsfiddle.net/TXWfh/1/
代码发布在：http: //jsfiddle.net/TXWfh/1/
回答by Alex Turpin
You could make it work with absolute, but I think relative might work best in your case.
你可以让它与 一起工作absolute，但我认为相对在你的情况下可能效果最好。
HTML
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
CSS
#test {
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
input {
padding: 4px;
}
JavaScript
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";
};
回答by Alex Turpin
Don't know what you are trying to do, but it really doesn't matter if you don't have a lot of surrounding html code that can get affected by your choice of position value.
不知道您要尝试做什么，但是如果您没有很多会受到您选择的位置值影响的周围 html 代码，这真的无关紧要。
following 3 fiddles do same things but with subtle difference that they have different value for position attribute.
以下 3 个小提琴做同样的事情，但有细微的区别，它们的位置属性值不同。
try clicking left center right. and see. I used jQuery though, super cool JS framework.
尝试单击左中右。看看。不过我用的是 jQuery，超级酷的 JS 框架。
