style.positionでのオブジェクトの配置

ボタンを使用してオブジェクトをある位置から別の位置に移動できるようにしたいと考えています。style.positionでのオブジェクトの配置

私はstyle.position = "absolute"を使用しようとしましたが、左または右に移動するか、最後の位置に応じてどの位置が同じ3つの位置になることはありません。

この場合、静的、絶対、固定、相対、継承のどれを使用するのが最適でしょうか？事前に特定のオブジェクトをどのように特定の位置に設定するかの例を得ることができます。

2012-04-13 Len

あなたが試したことでjsfiddle.netのデモをセットアップしてください。 –

あなたはそれぞれを試してみませんか？そうすれば、将来の努力のための情報を得ることができます。 –

1行のコードがない質問は、しばしば答えることができません。あなたが共有しなかった多くの細部があります。 –

position: absoluteは、要素を配置する方法はブラウザに指示しますが、要素を配置する場所は指定しません。あなたのCSSの中にleftまたはrightとtopまたはbottomの値を設定して要素を配置する必要があります。あなたはブツをこのように移動することができます

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

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

：http://jsfiddle.net/TXWfh/1/

出典

2012-04-13 15:28:29 Prestaul

また、スタイルアブソリュートを動作させるには、要素が要素の子でなければならないことに注意してください。「絶対」または「相対」のいずれか –

@JuanMendes、良い点。あなたのコメントは、コードの前に来たが、私はそれをカバーしていると思う。 :) – Prestaul

絶対に配置された 'div'が' body'の子であるため、あなたの場合は問題ありません。彼のdivが入れ子になっている場合、私はOPを警告しているだけです。 –

：

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

コードがに掲載され

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

といくつかのスタイル：

は、いくつかのマークアップを考えます

あなたは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

出典

2012-04-13 15:30:41

この例を変更して、CSSを使用した代替方法を示しました。 http://jsfiddle.net/mendesjuan/MPeeN/1/ –

このコードは、実際にコンテナの中央または右側を見つけることはありません。 – Prestaul

@Prestaulいいえ、それはありません。 –

は、あなたがやろうとしているのか分からないが、それは本当にありません問題あなたは、あなたの選択したポジション値の影響を受ける可能性のある、周囲のHTMLコードをあまり持っていません。

次の3つのフィドルは同じことを行いますが、微妙な違いは位置属性に異なる値があることです。

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

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

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

左右中央をクリックしてみてください。見てください。私はjQueryを使用しましたが、超クールなJSフレームワークです。