Divの角に対するCSSの配置

Question

大きなdiv内に複数のdivがあります。親divの左上隅を基準にして、これらのdivをすべて配置することは可能ですか？これにより、すべての内部divの座標が同じ参照点を基準とするため、特定のタスクの位置決めが容易になります。現時点では、position: relativeを使用すると、その位置は、position: relativeの影響を受けずにオフセットされます。

Answer 1

親/含有divをposition:relativeに設定します。次に、子divをpostion:absoluteに設定します。子どもは絶対的に配置されますが、全体のページに相対的ではなく、divを含む相対的な相対位置になります。

例はhttp://jsfiddle.net/jfriend00/GgNsH/です。

HTML：

<div id"otherStuff" style="height: 100px; background-color: #777;"></div> 
<div id="container"> 
    <div id="child1" class="child"></div> 
    <div id="child2" class="child"></div> 
    <div id="child3" class="child"></div> 
</div> 

CSS：それぞれの子は、コンテナの左/上隅から、それは左/トップの価値に配置されます

#container {position: relative;} 
.child {position: absolute; height: 10px; width: 10px; background-color: #777;} 
#child1 {top: 10px; left: 10px} 
#child2 {top: 30px; left: 30px} 
#child3 {top: 50px; left: 50px} 

。

それはどのように動作するのですか？position: absoluteです。最初に配置された親（位置の値がrelative、absoluteまたはfixedの親）を基準にして要素を配置します。親が配置されていない場合は、ドキュメントの左上隅を参照として使用します。これはトリックではありませんが、どのように動作することが文書化されており、非常に便利です。