Div that appears behind other. How to avoid that behaivor?

Question

Hello there...

I'm using JQuery for this. The problem is that, when I drag an object from the side bar, the DIV that I'm dragging appears behind the main area, thus it looks really bad. I took a screenshot of the problem: http://i.imgur.com/Xu4GM.png

The div I'm dragging has this CSS:

.reporte_arrastrado{ width: 150px; height: 60px; background-color: silver; background-image: url(chart.png); background-position: left center; background-repeat: no-repeat; padding: 10px 0 10px 26px; position:relative; }

And, the one that represents the main area has this CSS:

#tabs{ position:relative; }

That's it... I've read some answers here, and people always suggest to set the position property to relative. But, it does not work for me.

Thanks for reading.

Answer 1

try to set the z-index of your draggable DIV.

ie:

#dragger {
  z-index: 2;
  position: absolute;
  width: ...

}

Answer 2

Well... since I don't have too much time at all... I just change the z-index from JQuery dinamically. This is what I did:

$('#stuff').draggable({
    start: function(){
        $('#tabs').css('z-index', '-9999');
    },
    stop: function(){
        $('#tabs').css('z-index', '0');
    }
});

Thank you so much.