Objekt Positionierung mit style.position

Question

Ich möchte in der Lage sein, ein Objekt von einer Position zu einer anderen zu bewegen mit Tasten zum Beispiel 3 Tasten links rechts und in der Mitte, die das Objekt immer an die exakt gleiche Positionen setzen.

Ich habe versucht mit style.position = "absolute", aber es bewegt sich nach links oder rechts oder in welcher Position auch immer letzte Position nie die gleichen drei Positionen.

Welche der statischen, absoluten, festen, relativen, erben wäre in diesem Fall am besten zu verwenden? und ist es möglich, ein Beispiel zu erhalten, wie ein bestimmtes Objekt zu einer bestimmten Position im Voraus gesetzt werden würde

Answer 1

position: absolute sagt dem Browser, wie Sie Ihr Element positionieren, aber nicht WHERE, um Ihr Element zu positionieren. Sie müssen Ihr Element immer noch positionieren, indem Sie left oder right und top oder bottom Werte in Ihrem CSS setzen.

einige Markup Gegeben:

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

und einige Arten:

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

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

Sie können das Dingen auf diese Weise bewegen:

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 im Internet abrufbar ist: http://jsfiddle.net/TXWfh/1/

Answer 2

Sie könnten es mit absolute arbeiten lassen, aber ich denke, dass relative in Ihrem Fall am besten funktionieren könnte.

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

nicht wissen Sie, was Sie zu tun versuchen, aber es ist wirklich nicht egal ob Sie haben nicht viel umgebenden HTML-Code, der durch Ihre Wahl des Positionswerts beeinflusst werden kann.

folgende 3 Geigen tun die gleichen Dinge, aber mit einem feinen Unterschied, dass sie unterschiedliche Wert für Position Attribut haben.

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

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

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

versuchen rechts Mitte links klicken. und sehen. Ich benutzte jQuery, super coole JS-Framework.