在CSS中相對於另一個元素放置一個元素

Question

我想將四個div相對於另一個放置。我有一個矩形div，我想在其角落插入4 div。我知道CSS有一個屬性"position:relative"，但這是相對於該元素的正常位置。我想定位我的div不是相對於它們的正常位置，而是相對於另一個元素（矩形）。我該怎麼辦？

Answer 1

我會建議使用的元素中絕對定位。

我創建了這個JSfiddle來幫助你可視化一下。

http://jsfiddle.net/wUrdM/

Answer 2

position: absolute將使由座標相對於所述最接近的定位祖先，即最接近的父這是不position: static的元件。

將您的四個div嵌套在目標div中，給出目標div position: relative，並在其他上使用position: absolute。

結構化你的HTML類似：

<div id="container"> 
    <div class="top left"></div> 
    <div class="top right"></div> 
    <div class="bottom left"></div> 
    <div class="bottom right"></div> 
</div> 

而這個CSS應該工作：

#container { 
    position: relative; 
} 

#container > * { 
    position: absolute; 
} 

.left { 
    left: 0; 
} 

.right { 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

...