如果另一个绝对位置已经在那个位置，可以移动一个绝对位置吗？

Question

我正在尝试在我的网站上制作日历。因此，在我的 C# 代码中，我为该日历制作了所有表格单元格（我将其作为 html 字符串返回到我的视图中）。在这样做的同时，我检查我的数据库以查看是否有任何任务进入该单元格并循环遍历它，直到没有任务剩下。然后我移动到下一个单元格并再次执行相同的操作。

但是，有些任务跨越一天，所以当我生成任务时，我会计算出它跨越了多少天，并通过放置一个可以跨越那么多表格的宽度来制作一个围绕任务的 div细胞。

但是，要显示跨越多天的这个 div，我必须让所有这些 div 都具有 css 绝对值。否则，由于我使用“css 溢出”，任何不适合单元格的内容都会被隐藏，因此如果我在此 div 上有背景颜色，它只会显示该单元格的背景颜色，因为其余部分会被隐藏。所以即使宽度足够长，它总是隐藏在下面。

因此，通过使用“css absolute”，同一单元格中的所有任务都会相互堆积。我发现如果我在每个 div 上放置一个 margin-top，我可以避免这种堆积。但是它不会帮助我解决下一个问题。

假设我有一个从 1 月 1 日到 1 月 2 日跨越 2 天的任务。它的宽度正好跨越 2 个单元格。

由于这个 div 具有绝对设置并且跨越 2 天。

http://img35.imageshack.us/img35/3808/screenshot001mo.jpg

这张图片显示了它跨越 2 天的样子。

现在他们去向 1 月 2 日添加另一个任务。此任务将放置在跨越 1 月 1 日和 1 月 2 日的任务的黄色背景之上，从而不再明显地看出 1 月 1 日的任务跨越到 1 月 2 日。

http://img35.imageshack.us/img35/806/screenshot002ml.jpg

这张图片显示我在 1 月 2 日添加了另一个任务。所以重叠已经发生，很难说第一个任务跨越 2 天。现在想象一下，如果您必须在同样的 2 天内完成跨越 2 天的任务。

所以我需要一些方法来检测这些碰撞或其他东西，以便如果有东西占据了那个空间，它会向下移动它或其他东西。

我希望这是有道理的

你可以看到这个 jquery 插件，我正在模仿我的模型。他们有些如何让任务不相互重叠。

http://arshaw.com/fullcalendar/

我正在使用以下内容：

• asp.net mvc
• C#
• jquery
• html
• CSS

Answer 1

这是一个艰难的过程。

在使用绝对位置时，如果位置被占用，则无法使物体自动转移到另一个位置。

您可以作弊，让它们全部重叠并使用透明胶片（50% 不透明度）和z-index。当周期重叠时，它们会发光。然后，您可以为每个周期提供一个onclick 事件，该事件将条形图的z-index 置于后台，以实现一种非常原始的洗牌。 非常大致：

<div class="period" onclick="this.style.zIndex = this.style.zIndex-2;">1 Day span</div>

您必须实施一种机制来处理 z-index 将不断下降到零以下这一事实，所以这只是一个非常粗略的概述。

这在用户体验方面不是很好，但它可以完成这项工作，并且用户可以访问所有信息。

如果您想正确执行此操作，我认为您将无法绕过跟踪每行中当前的“畅通车道”，即有多少个运行周期以及您需要调整多少开始新时期的 y 位置。

另一种更简单的方法是不使用绝对定位，而是在跨整行的容器中使用正常的运行divs。 编辑：但是当一个句点跨越多行时，这会给你带来麻烦。不，你不会自己计算位置。