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的父項）定位，或者如果沒有定位父項，則它將文檔的頂部/左側角用作參考。這不是一個竅門，但它是如何記錄下來的，它非常有用。