Как React Grid Layout может устанавливать z-index для перетаскиваемых элементов, несмотря на то, что каждый элемент имеет свой собственный контекст стека?

Question

Я пытаюсь выяснить, как Схема сетки реагирования способна удерживать активно перетаскиваемый элемент над всеми остальными перетаскиваемыми объектами. Просматривая исходный код js и css здесь и здесь , я вижу, что класс динамически добавляется к активно перетаскиваемому элементу, который устанавливает его z-index как более высокое число, чем другие.

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

Однако я также заметил, что расположение каждого перетаскиваемого объекта задается с помощью преобразования css, которое, если я не ошибаюсь, создает новый css контекст стека для каждого перетаскиваемого объекта. Согласно многочисленным источникам , каждый контекст суммирования должен быть независимым друг от друга, и любой заданный им z-индекс интерпретируется только в их конкретном c контексте.

Если это так, то как вышеприведенный код может поддерживать активно перетаскиваемые элементы поверх всего остального, используя z-index?

Я создал коды и поле здесь , чтобы поиграй с ...