Каков наилучший способ иметь div перекрывать несколько ячеек таблицы

Question

Я создаю веб-страницу календаря, используя jQuery и asp.net-mvc , аналогичные этому , и я не могу понять, как этот пример поддерживает события, которые охватывают несколько дней (он показывает событие какодин элемент за несколько дней в представлении).

Используя firebug, я вижу, что календарь - это просто таблица:

, но я не могувыясните, как у них есть div события, который пересекает несколько ячеек таблицы, например «длинное событие» на изображении ниже?

Answer 1

Сочетание ответов выше:

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

вам может потребоваться указать z-индекс, чтобы ваш элемент отображался поверх содержимого других ячеек таблицы.

Answer 2

Поместите DIV в ячейку календаря (position:relative) и используйте абсолютное позиционирование. Это исключает его из макета и больше не ограничено его контейнером.

Answer 3

position: relative; = схема потока, вещи будут занимать пространство и перемещать элементы вокруг

position: absolute; = абсолютный макет, вещи больше не будут занимать пространство или перемещать другие элементы, они будут располагаться по верхним / левым значениям относительно их родителя *

То, как они создали календарь, все относительно, кроме самих событий. Они устанавливают эти div для использования абсолютного позиционирования, поэтому они эффективно плавают вне обычного потока. Таким образом, они могут перерасти в другие клетки без нарушения макета.

* Имейте в виду, что объекты по умолчанию имеют относительное позиционирование, но когда вы явно устанавливаете объект на относительное позиционирование, вы сбрасываете координаты сверху / слева для любого дочернего элемента, используя абсолютное позиционирование.