z-index problem with helper clone

This is my code (please see http://jsfiddle.net/VCfSc/1/):

$('.first').draggable({
    cancel: null,
    helper: 'clone'
});

$('.second').droppable({
    over: function(event, ui) {
        $(this).css('z-i开发者_运维问答ndex', 1);
        ui.helper.css('z-index', 0);
    }
});

I am trying to have the helper clone go under the droppable element when it is dragged over it. What am I doing wrong?

When you drag the .first element, the generated draggable element is positioned absolutely and added after the .second element. An absolutely positioned element gets a higher precedence. To fix this, use ui.helper.css('z-index', "-1"); instead of ui.helper.css('z-index', 0);.