CSS相对于Div角落的定位

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的父元素）定位，或者如果没有父元素定位，则使用top /文档的左下角作为参考。这不是一个技巧，但它是如何记录的，它非常有用。