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!

Solution 1

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

Solution 2

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?

Solution 3

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

Solution 4

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

Solution 5

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

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

View more solutions

Comments

[airmanx86]

Alternatively apply a class that has those attribute that you need with jQuery.

[Amr Elgarhy]

i think you will need both, so position:absolute AND z-inde:1

[RAmPE]

I initially agreed with this answer but it sounds like the question is about bringing a certain div (of overlapping divs) to the front when needed. Setting a particular div to the top in the static markup won't solve the issue.

[Mavelo]

agreed, but this really belongs in the css unless you are reacting to user interactions

[Greg]

It seems like he wants to do this dynamically and wants to know if jQuery has this functionality.

[dennisbest]

This is a helpful answer for those who want something dynamic, particularly if you're using draggable elements.

[Imran Balouch]

Awesome idea and approach, yeh it is weird to go for z-index when this approach exists, and I accept that first thing that came in my mind was z-index :$

[qualebs]

Is this approach appending multiple elements of the child being appended? please clarify that for me.

[Yarin]

@qualebs no it's grabbing an existing element and moving it to top of stacking order

[qualebs]

@Yarin thanks a bunch you have saved me a paragraph of boilerplate code. This answer should be the accepted answer.

[Nick Bedford]

Moving the div to the end of the parent's node list also usually brings it to the top. Without using z-index, the draw order is typically first to last elements, hierarchically of course

[teynon]

5 years later. How do I bring a div to the front? Answer: z-index: 5000000000000;

[William Isted]

Basically it has to be 1 higher than the highest z-index on the page.

[Simas Joneliunas]

Please consider leaving a comment on how your code helps to answer the question