JQuery перетаскиваемый стек не отображается поверх сбрасываемых элементов «дальше» в HTML

Question

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

Проблема, которую я ищу помогло то, что я столкнулся с некоторым странным поведением перетаскиваемых элементов через JQuery пользовательский интерфейс Перетаскиваемые элементы красиво складываются поверх других сбрасываемых элементов, которые идут перед ним в HTML, но для меня необъяснимо, они появляются под сбрасываемыми элементами, которые идут после него в HTML. Обработчик отбрасывания работает правильно в обеих ситуациях, поэтому я предполагаю, что это что-то, связанное с CSS, но после того, как я много возился с z-index, я все еще не могу заставить его работать должным образом.

Я должен возможно добавьте, что проблема возникла после того, как я сделал сбрасываемые элементы «переворачивающими карты» с помощью css -transform (.flip-container и .flip раньше не было).

Вот код, который я думаю имеет отношение к анализу проблемы. Фрагмент не запускается, потому что для этого потребуется загрузить большую часть css, что сделало бы вещи более неясными, как я думал.

С другой стороны: я использую Twig для рендеринга HTML , но вывод имеет какой-то странный отступ, когда браузер его получает. Это, кажется, не беспокоит, но читаемость для людей немного страдает от этого. Если это нечитаемо, дайте мне знать, тогда я вручную исправлю это во фрагментах кода.

$("div.dienst.roostering").draggable({
  cursor: 'move',
  stack: '.dienst',
  revert: true,
  containment: '#rooster_info_en_behoefte',
});

$("div.flip-container").droppable({
  accept: '.dienst',
  hoverClass: 'hovered',
  drop: handleDrop
});

.calendar_day_all {
  margin: 40px 10px;
  font-size: 12px;
  border: 1px solid black;
  background-color: #F3F3F3;
}

.weekend_dag .date {
  background-color: black;
}

.zaterdag {
  margin-top: 60px;
}

.zondag {
  margin-bottom: 150px;
}

.date {
  padding: 5px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  border-bottom: 1px solid grey;
  background-color: #1c3264;
  color: white;
}

.calendar_day_all_vestiging_wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 0;
}

.flip-container,
.flip {
  display: flex;
  position: relative;
}

.flip {
  transition: transform 0.4s;
  transform-style: preserve-3d;
  position: relative;
}

.flip-container {
  perspective: 800px;
}

.flip.flipped {
  transform: rotateY( 180deg);
}

.flip .front,
.flip .back {
  backface-visibility: hidden;
  z-index: 0;
}

.flip .back {
  transform: rotateY( 180deg);
  position: absolute;
}

.calendar_day_all_vestiging,
.gat_op_rooster {
  width: 242px;
  text-align: center;
  margin: 3px;
  border: 1px solid grey;
  border-radius: 3px;
  background-color: white;
  font-size: 1.7rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calendar_wrapper">

  <div class="calendar_day_all">
    <div class="date">
      Mon 2 Mar 2020 - Week 10
    </div>

    <div class="calendar_day_all_vestiging_wrapper" name="planning_2020-03-02">

      <!-- Actieve vestigingen renderen -->

      <div class="flip-container" id="2020-03-02&1&Voorburg">

        <div class="flip 437">

          <div class="calendar_day_all_vestiging roosterdata roosterdata_437 back">

            <div class="name_vestiging">
              <a href="" name="437" class="toggleBehoefte achterkant">
						  Voorburg
					</a>
            </div>

            <!-- Behoeftevelden renderen -->
            Opmerkingen<br/>
            <textarea name="opmerkingen_437" class="437" placeholder="Verkort rooster, Koningsdag, etc."></textarea>

            <table>

              <tr>
                <td>
                  Gesloten
                </td>
                <td>
                  <input type="checkbox" name="gesloten_437" class="gesloten 437">
                </td>
              </tr>

              <tr>
                <td>
                  Verkort rooster
                </td>
                <td>
                  <input type="checkbox" name="verkort_rooster_437" class="verkort_rooster 437">
                </td>
              </tr>

              <tr class="normaal_rooster_437">
                <td>
                  Starttijd vroeg
                </td>
                <td>
                  <input type="time" name="starttijd_vroeg_437" class="437" step="300" value="14:30:00">
                </td>
              </tr>

              <tr class="normaal_rooster_437">
                <td>
                  Starttijd normaal
                </td>
                <td>
                  <input type="time" step="300" name="starttijd_normaal_437" class="437" value="15:00:00">
                </td>
              </tr>

              <tr class="normaal_rooster_437">
                <td>
                  Einddtijd
                </td>
                <td>
                  <input type="time" step="300" name="eindtijd_437" class="437" value="18:00:00">
                </td>
              </tr>

              <tr class="verkort_rooster_437" style="display:none">
                <td>
                  Starttijd vroeg (vr)
                </td>
                <td>
                  <input type="time" step="300" name="starttijd_vroeg_verkort_437" class="437" value="13:00:00">
                </td>
              </tr>

              <tr class="verkort_rooster_437" style="display:none">
                <td>
                  Starttijd normaal (vr)
                </td>
                <td>
                  <input type="time" step="300" name="starttijd_normaal_verkort_437" class="437" value="13:30:00">
                </td>
              </tr>

              <tr class="verkort_rooster_437" style="display:none">
                <td>
                  Eindtijd (vr)
                </td>
                <td>
                  <input type="time" step="300" name="eindtijd_verkort_437" class="437" value="17:00:00">
                </td>
              </tr>

              <tr>
                <td>
                  Aantal leerlingen
                </td>
                <td>
                  <input type="number" min="0" name="aantal_leerlingen_437" class="aantal_leerlingen 437" value="30">
                </td>
              </tr>

              <tr style="display:none">
                <td>
                  Maximum begeleiders
                </td>
                <td>
                  <input type="number" name="max_begeleiders_437" class="437" value="5" disabled="disabled">
                </td>
              </tr>

              <tr>
                <td>
                  Aantal begeleiders
                </td>
                <td>
                  <input type="number" min="0" name="aantal_begeleiders_437" class="437" value="5" title="Maximaal 5" disabled="disabled">
                </td>
              </tr>

              <tr>
                <td>
                  Begeleiders vroeg
                </td>
                <td>
                  <input type="number" min="0" max="5" name="begeleiders_vroeg_437" class="begeleiders_optellen 437" value="2">
                </td>
              </tr>

              <tr>
                <td>
                  Begeleiders normaal
                </td>
                <td>
                  <input type="number" min="0" max="5" name="begeleiders_normaal_437" class="begeleiders_optellen 437" value="3">
                </td>
              </tr>

            </table>
          </div>

          <div class="calendar_day_all_vestiging roosterdata_437 front">

            <a href="" id="2020-03-02&1" class="voeg_dienst_toe">
					+
				</a>
            <div class="name_vestiging">
              <a href="" name="437" class="toggleBehoefte voorkant">
			       Voorburg
					</a>
              <span class="aantal_begeleiders">1 / 5</span>
            </div>

            <div id="2020-03-02&1&720" class="dienst Vestigingsmanagement roostering">
              <table>
                <tr>
                  <td class="vakkenpakket" title="C&amp;M - Duits">
                    <span class="vakkenpakket_1">
								</span>
                  </td>
                  <td class="show_name">
                    Ike Gerritsen
                  </td>
                  <td class="show_start_time">
                    13:00
                  </td>
                  <td>-</td>
                  <td class="show_end_time">
                    18:00
                  </td>
                </tr>
              </table>
            </div>

            <div id="2020-03-02&1&721" class="dienst Huiswerkbegeleiding roostering">
              <table>
                <tr>
                  <td class="vakkenpakket" title="E&amp;M - Duits">
                    <span class="vakkenpakket_2">
								</span>
                  </td>
                  <td class="show_name">
                    Livia Tromp
                  </td>
                  <td class="show_start_time">
                    15:00
                  </td>
                  <td>-</td>
                  <td class="show_end_time">
                    18:00
                  </td>
                </tr>
              </table>
            </div>

            <div class="gat_op_rooster">
            </div>
            <div class="gat_op_rooster">
            </div>
            <div class="gat_op_rooster">
            </div>
            <div class="gat_op_rooster">
            </div>

          </div>
        </div>
      </div>
    </div>

И, наконец, несколько экранов, показывающих проблему:

Начальная позиция

Правильно складывается в элементах до

Неправильно складывается в элементах после

Я много искал в inte rnet, чтобы найти решение, и Я думал, что это может быть связано с этой записью, но я не мог заставить ее работать. Любая помощь приветствуется, большое спасибо заранее!