CSS相对于Div的角落定位

Question

我在一个较大的divs中有几个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的父项）定位，或者如果没有定位父项，则它将文档的顶部/左侧角用作参考。这不是一个窍门，但它是如何记录下来的，它非常有用。