Is there a way in jQuery to bring a div to front?

Question

If I had a bunch of absolute positioned divs and they overlapped, how would I get a certain div to come to the front? Thanks again guys!

Answer 1

When you are working with multiple elements you'll have to loop through and see which has the highest z-index, and set the top to that+1.

http://jsfiddle.net/forresto/Txh7R/

var topZ = 0;
$('.class-to-check').each(function(){
  var thisZ = parseInt($(this).css('zIndex'), 10);
  if (thisZ > topZ){
    topZ = thisZ;
  }
});
$('.clicked-element').css('zIndex', topZ+1);

---

For a non-CSS version (if none of the layers have z-index specified) you can also just append the element again:

$('.click-to-top').click(function(){
  $(this).parent().append(this);
});

(I don't know if that is slower than with CSS z-index.)

For non-CSS non-jQuery, just append it again:

// var element = document...;
element.parentNode.appendChild(element);