CSS内のある要素を他の要素と相対的に配置する

Question

divを別の要素に対して相対的に配置したいとします。私は長方形divを持っていて、その隅に4 divを挿入したいと思います。私はCSSが属性"position:relative"を持っていることを知っていますが、これはその要素の通常の位置に関連しています。 divの位置は、通常の位置に相対的ではなく、別の要素（矩形）を基準にして配置します。私は何をすべきか？

Answer 1

私は、要素内に絶対位置を使用してお勧めします。

私はこれを少し可視化するためにこのJSfiddleを作成しました。

http://jsfiddle.net/wUrdM/

Answer 2

position: absoluteposition: staticはない最も近く配置祖先、すなわち最も近い親からの相対座標で素子を配置します。

ターゲットdiv内に4つのdivがネストされていて、ターゲットdivにposition: relative、残りの部分にを使用してください。

これまで、あなたのHTMLは、同様の構造：

<div id="container"> 
    <div class="top left"></div> 
    <div class="top right"></div> 
    <div class="bottom left"></div> 
    <div class="bottom right"></div> 
</div> 

そして、このCSSは動作するはずです：

#container { 
    position: relative; 
} 

#container > * { 
    position: absolute; 
} 

.left { 
    left: 0; 
} 

.right { 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

...