CSS-позиционирование: относительное строит независимые «стеки»; или: почему синий боится красного и желтого?

Вы также можете:

1. применить z-index только к элементам внутри контейнеров. (и следите за тем, чтобы не применять z-индекс к контейнерам, иначе они настроят свои собственные контексты стекирования, а z-индекс, применяемый ко всему внутри, будет относиться только к новому контексту.)

2. Удалите объявление position:relative из двух контейнеров. Без каких-либо объявлений z-index позиционированные элементы будут отображаться перед непозиционированными элементами.

Хорошее объяснение контекстов стека можно найти здесь: http://timkadlec.com/2008/01/detailed-look-at-stacking-in-css/

ОБНОВЛЕНИЕ
Вы можете попробовать параметр helper:clone для перетаскивания jQuery/UI.

Поскольку он «клонирует» элемент, который вы хотите перетащить («использовать для отображения перетаскивания»), он не привязан к тому же контейнеру, что и оригинал. Но вам придется иметь дело с тем фактом, что элемент по-прежнему отображается в своем исходном положении, пока «клонированный» элемент перетаскивается.

Вы можете использовать события запуска и остановки draggable, чтобы сделать оригинал невидимым и снова видимым:

$('.myDiv')
    .draggable({
        helper: 'clone',
        start: function () {
            $(this).css('visibility', 'hidden');
        },
        stop: function () {
            $(this).css('visibility', 'visible');
        }
    })

... но тогда вам нужно будет разобраться с тем, что происходит, когда предмет выпадает, как предлагает Андриус. Для этого я бы рекомендовал посмотреть этот пост: клонирование узла при перетаскивании

Удачи.