如何定位 <div> 绝对对父母和相对邻居

Question

I'm working on a simple little project right now and I can't seem to figure out the styling.

Basically, what I need to do is position a 'div' a certain number of pixels down from the top of its parent. To do this I made its position absolute and set top to whatever pixel offset I need. The problem with this is sometimes two 'div's will be at the same vertical position (or close to it) in the parent and will overlap. I need to have them line up side by side horizontally when they are overlapping. I know how to do this with a position of relative and the float property but this then breaks the vertical positioning.

The boxes are inserted dynamically with jQuery and their positions can change frequently.

Here is a jsfiddle to demonstrate.

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

you may make the sub div's inside other div and give this one absolute position

 .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> 

if you want them horizontally add to .child

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

Answer 2

As far as I can tell this isn't solvable with CSS. I ended up doing some decently complex javascript to detect collisions and reposition the div's appropriately.