javascript - 相对于 Div Angular 的 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}

每个 child 都将定位在容器的上/左 Angular 的上/左值处。

之所以有效，是因为 position: absolute 就是这样工作的。它相对于第一个定位的父元素(位置值为 relative、absolute 或 fixed 的父元素)定位元素，或者如果没有父元素定位，然后它使用文档的上/左 Angular 作为引用。这不是技巧，但它是如何工作的，而且非常有用。