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);

Answer 2

It would be overkill to use jQuery for this. Instead use CSS' z-index property:

<style type="text/css">
  #myElement {
    z-index: 50000;
  }
</style>

Answer 3

With jQuery (like you asked):

$('#a-div').parent().append($('#a-div')); // Pop a div to the front

Weird how everyone went with z-index. Why override natural stacking order when you can just pop it to the front within the DOM?

Answer 4

This is a CSS thing, not a jQuery thing (though you can use jQuery to modify the css).

$('element').css('z-index', 9999);  // note: it appears 'zIndex' no longer works

Or, absolute positioning will bring something to the top:

$('element').css('position', 'absolute');

Answer 5

element.style.zIndex = Date.now();

Answer 6

Use .css() and apply position attribute and z-index attribute.