如何重叠列中的div？

Question

我有一个表格列并动态地放入一些div。 divs是一个容器div的子节点，因此它们可以在其中定位。

以下是一个例子：

<div class="container" style="width: 100px">
  <div id="div1" style="position:absolute;top:50px;height:100px;width:100px"></div>
  <div id="div2" style="position:absolute;top:50px;height:100px;width:100px"></div>
</div>

这里的第一个问题是，div2涵盖了div1。所以div1需要宽度为50px，div2也需要。 div2必须离开：50px。有没有办法检查div是否覆盖了另一个div？或者是否有任何适合列中所有div的jQuery插件？

以下是我需要的一个例子。它来自谷歌日历：

编辑： 好的，我可以用一些JavaScript来做这些：

但我需要这些：

任命7和6必须swicht。所以它们适合空旷的空间。我可以用同位素做这些吗？

编辑：可以用同位素按日期时间排序并手动设置css top属性吗？

Answer 1

您可以尝试使用以下插件：

http://masonry.desandro.com/

Answer 2

使用名为Z-index的css属性。 Z-index将它们作为一个层进行管理。这将允许您将div重叠在一起。