什麼是使多個表格單元格重疊的最佳方式

我正在使用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

回答