css - 在 CSS 中相对于另一个元素定位一个元素

Question

我想div相对于另一个定位四个 s。我有一个 rectangle div，我想div在它的角落插入 4 s。我知道 CSS 有一个属性"position:relative"，但这与该元素的正常位置有关。我想定位我div的 s 不是相对于它们的正常位置，而是相对于另一个元素（矩形）。我该怎么办？

Answer 1

position: absolute将通过坐标定位元素，相对于最近定位的祖先，即不是最近的父级position: static。

让你的四个 div 嵌套在目标 div 中，给目标 div position: relative，然后position: absolute在其他 div 上使用。

像这样构造你的 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;
}

...

Answer 2

我建议在元素内使用绝对定位。

我已经创建了这个，以便您可以将其可视化。

#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/