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

我正在使用jQuery和asp.net-mvc similar to this构建日历网页，我无法弄清楚这个例子如何支持跨越多天的事件（它将该事件显示为视图中的多个天内的单个项目）。什么是使多个表格单元格重叠的最佳方式

用Firebug，我看到日历是一个简单的表格：

enter image description here

，但我无法弄清楚他们如何有事件的div横跨表的多个细胞像“龙事件“在下面的图片？

enter image description here

2011-12-05 leora

没有人提到过示例表没有跨越布局。对于前一天开始的事件，这是“虚假的”，这是在第二项第一项中的“全天事件”。然后，完全在表格外/从表格中分离出“长时间事件”内容文本的“位置：绝对”div以及样式和链接处理。 –

结合上述问题的答案：

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

您可能需要提供的z-index以确保出现在其他表格单元格的内容顶你的元素..

2011-12-05 21:33:27 wrschneider

多个事件将出现在彼此的顶部，而不是彼此间隔（例如，星期四具有长事件和全天事件），并且具有位置：绝对值，当然它们将彼此堆叠在一起 –

。绝对定位的缺点是你必须明确指定顶部。另一种选择是“伪造”多个单元格的跨度，方法是在每个TD中放置多个用CSS样式化的DIV，使其看起来像单个事件。 – wrschneider

是啊，这里肯定会有一些“魔法” –

把DIV在日历细胞（position:relative），并使用绝对定位。这将其从布局中取出，不再受其容器限制。

2011-12-05 21:28:53

事件将堆叠在彼此之上......这对每天的一个事件都很好，但如果事件重叠，他们将堆栈...解决一个问题会产生另一个问题。 –

是的，每个额外的人需要有不同的Y位置。您可以在放置它们时进行计算。或者使用UL/LI的包装 - 制作物品LI并将其定位在包装上。 –

position: relative; =流布局，东西将占用空间并推动周围的元素

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

他们创建日历的方式都是相对的，除了事件本身。他们将这些div设置为使用绝对定位，因此它们实际上在正常流程之外浮动。这样，他们可以成长为其他细胞而不会干扰布局。 *请记住，对象默认为相对定位，但是当您将对象显式设置为相对定位时，可以使用绝对定位重置任何子对象的顶部/左侧坐标。

2011-12-05 22:01:50 rkw

哇感谢*我不知道！ – Craig

回答