在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; 
} 

...