Setting z-index on draggable elements
I have updated your CSS and Javascript. Don't use "!important" in css unless you are that much desperate.
$(document).ready(function() { var a = 3; $('#box1,#box2,#box3,#box4').draggable({ start: function(event, ui) { $(this).css("z-index", a++); } }); $('#dragZone div').click(function() { $(this).addClass('top').removeClass('bottom'); $(this).siblings().removeClass('top').addClass('bottom'); $(this).css("z-index", a++); });});
Though this answer works it has the limitation of max number of 2^31−1 in javascript.refer What is JavaScript's highest integer value that a Number can go to without losing precision? for more info.