一个元素相对于另一个在CSS位置(Position one element relative to

我想四号位div小号相对于另一个。 我有一个长方形div ，我想插入4 div在其角秒。 我知道CSS有一个属性"position:relative" ，但这是相对于该元素的正常位置。 我想我的位置div不是相对于它们的正常位置，但相对于其他要素（矩形）秒。 我该怎么办？

Answer 1:

我会建议使用的元素中绝对定位。

我创建这个帮助你想象它一下。

 #parent { width:400px; height:400px; background-color:white; border:2px solid blue; position:relative; } #div1 {position:absolute;bottom:0;right:0;background:green;width:100px;height:100px;} #div2 {width:100px;height:100px;position:absolute;bottom:0;left:0;background:red;} #div3 {width:100px;height:100px;position:absolute;top:0;right:0;background:yellow;} #div4 {width:100px;height:100px;position:absolute;top:0;left:0;background:gray;} 

 <div id="parent"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </div> 

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

...

文章来源: Position one element relative to another in CSS