javascript - 如何将 <div> 绝对定位到父级和相对于邻居

Question

我现在正在做一个简单的小元素，我似乎无法弄清楚样式。

基本上，我需要做的是将“div”放置在距其父项顶部一定数量的像素处。为此，我将其位置设置为绝对位置，并将 top 设置为我需要的任何像素偏移量。这样做的问题是有时两个“div”会在父级中处于相同的垂直位置(或靠近它)并且会重叠。当它们重叠时，我需要让它们水平并排排列。我知道如何使用相对位置和 float 属性来执行此操作，但这会破坏垂直定位。

盒子是用 jQuery 动态插入的，它们的位置可以经常改变。

这是一个jsfiddle进行演示。

HTML

<div class="main">
  This is okay
  <div style="top: 25px;" class="sub">
    <h3>
      test
    </h3>
  </div>
  <div style="top: 100px;" class="sub">
    <h3>
      test
    </h3>
  </div>
  <div style="position: absolute; top: 200px;">
    This is the problem
  </div>
  <div style="top: 250px;" class="sub">
    <h3>
      test
    </h3>
  </div>
  <div style="top: 260px;" class="sub">
    <h3>
      test
    </h3>
  </div>
</div>

CSS

.main {
  background-color: grey;
  height: 700px;
}

.sub {
  border: thin solid black;
  position: absolute;
}

Answer 1

你可以将子 div 放在其他 div 中并给它一个绝对位置

.main {
  position:relative;
  background-color: grey;
  width:100%;
  height:auto;
}

.sub {
  position: absolute;
  top:100px;
  width:100%;
}
 .child {
  border:2px solid black;
  width:500px;
  height:500px;
  margin:10px auto;
 }

<div class="main">
   <div class="sub">
      <div class="child"></div>
      <div class="child"></div>
   </div>
</div>

如果你想让它们水平添加到.child

float:left;
width:47%;
margin:1%;