Javascript CSS相对于Div角的定位

我在一个较大的div中有几个div。是否可以相对于父div的左上角定位所有这些div？这将使某些任务的定位更容易，因为所有内部div的坐标都将相对于同一参考点。此时使用

position:relative

只会将其位置偏移，而不受

position:relative
的影响，将父/包含div设置为
位置：relative
。然后，将子div设置为
position:absolute
。然后将绝对定位子项，但相对于包含的div，而不是相对于整个页面

下面是一个例子：

HTML:

每个子对象将位于容器左上角的上/左值处

它之所以有效，是因为
position:absolute
就是这样工作的。它相对于第一个定位的父元素（位置值为
相对
、
绝对
或
固定
）定位元素，或者如果未定位父元素，则使用文档的左上角作为参考。这不是一个技巧，而是它是如何被记录下来的，它非常有用。
我在回答中添加了一个例子和一点解释。有关更多说明，请参见本页的选项卡4：注意，父元素可以是
位置：绝对
，也可以是
位置：相对
，两者都为子元素创建了新的定位上下文。
<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>

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