2010-12-05 13 views
0

たとえば、私は "position" divを持っていて、 "A"というdivと "B"というdivがあります。私は両方とも "A"、 "B"の位置は "位置"のdivに相対的です。divの位置を作る方法は、1つのdivを基準にしていますか?

例えば、位置divは100,100絶対値で、A位置は "position" 'sx - 100、 "position"' sy - 100、...は0、0絶対値で表します。 Bの位置は "位置"のx + 100、 "位置"のy + 100、...という意味で、絶対値で200、200になります。

しかし、ウィンドウのサイズを変更したり、位置divを移動した場合、「A」と「B」が「位置」の位置に従うようにしたいと思います。たとえば、「500」位置に「500」と表示されていれば、A位置は400,400でなければなりません。B位置は600,600でなければなりません。

"A"と "B" cssだけを使って "position" divに続いている?ありがとうございました。

「A」と「B」は、相対的/位置に継承を使用することが異なっている、「位置」DOMツリーに存在しないためのコードは、このようなものである:

<body> 
     <div id="A"></div> 
     <div id="position"></div> 
     <div id="B"></div> 
</body> 

答えて

0

にそれを行う... div AとBは "position" divの内側にあるはずです。次に、 "position" divはposition:relativeで、A、Bはposition:absoluteである必要があります。あなたの "position" divが絶対的である必要がある場合、ラッパーdivの使用を検討してください。

絶対位置を設定すると、上、下、左、右のいずれかの属性が、 position:relative ..デフォルトでbodyタグは相対的な位置にあります... see this

今は.... AとBを「位置」に挿入したくない場合は、JavaScriptを使用して現在の位置や..

をそれらを変更幸運は

ところで:あなたのためのより良い名前を使用してみてくださいdiv = Pその混乱をあなたは「位置」のdiv

0
<html> 
<head> 
<style> 
div { 
    height: 200px; 
    width: 200px; 
} 
#position { 
    position: absolute; 
    top: 400px; 
    left: 400px; 
    background-color: #444; 
} 
#A { 
    position: relative; 
    top: -100px; 
    left: -100px; 
    background-color: #e00; 
} 
#B { 
    position: relative; 
    top: -100px; 
    left: 100px; 
    background-color: #0ee; 
} 
</style> 
<body> 
    <div id="position"> position 
      <div id="A">A</div> 
      <div id="B">A</div> 
    </div> 
</body> 
</html> 
+0

の位置を説明しようが、私は「位置」内の「A」と「B」をしたい、私はそうすることができないのですか? – Tattat

+0

内部ではどういう意味ですか?彼らはどこにでも移動でき、 'z-index'で上のものを変更することができます(長い応答時間は申し訳ありません:) –