使div重叠多个表格单元格的最佳方法是什么

Question

我正在使用jQuery和asp.net-mvc similar to this构建日历网页，我无法弄清楚此示例如何支持跨越多天的事件（它将事件显示为单个项目在视图中的多天。）

使用萤火虫，我看到日历只是一张桌子：

但我无法弄清楚他们如何让事件div跨越表格的多个单元格，如下图所示的“长事件”？

Answer 1

将DIV放入日历单元格（position:relative）并使用绝对定位。这将其从布局中取出，并且不再受其容器的限制。

Answer 2

结合上述答案：

<TD style="position: relative">
  <DIV style="position: absolute; z-index: ?; width: ?px;... ">
  </DIV>
</TD>

您可能需要提供z-index以确保您的元素显示在其他表格单元格内容之上。

Answer 3

position: relative; =流布局，事物会占用空间并推动元素

position: absolute; =绝对布局，事物将不再占用空间或推动其他元素，它们将按其相对于其父级的顶部/左侧值定位*

他们创建日历的方式，一切都是相对的，除了事件本身。他们将这些div设置为使用绝对定位，因此它们有效地浮动在常规流之外。通过这种方式，它们可以成长为其他细胞而不会干扰布局。

*请记住，对象默认为相对定位，但是当您将对象显式设置为相对定位时，您可以使用绝对定位重置顶部/左侧坐标。