30

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!

Kerry Jones
  • 21,806
  • 12
  • 62
  • 89
anthonypliu
  • 12,179
  • 28
  • 92
  • 154
  • https://stackoverflow.com/questions/5680770/how-to-find-the-highest-z-index-using-jquery/5680815 – Midas May 01 '20 at 15:15

6 Answers6

42

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');
amonett
  • 714
  • 5
  • 12
Kerry Jones
  • 21,806
  • 12
  • 62
  • 89
  • 2
    i think you will need both, so position:absolute AND z-inde:1 – Amr Elgarhy Jul 13 '10 at 00:13
  • 2
    agreed, but this really belongs in the css unless you are reacting to user interactions – Mavelo Jan 03 '12 at 18:37
  • It seems like he wants to do this dynamically and wants to know if jQuery has this functionality. – Greg Oct 10 '12 at 17:06
  • 1
    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 – Nick Bedford Jan 02 '15 at 02:54
29

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?

Yarin
  • 173,523
  • 149
  • 402
  • 512
  • 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 :$ – Imran Balouch Jul 20 '14 at 02:00
  • Is this approach appending multiple elements of the child being appended? please clarify that for me. – qualebs Oct 20 '14 at 09:57
  • @qualebs no it's grabbing an existing element and moving it to top of stacking order – Yarin Oct 21 '14 at 14:49
  • 2
    @Yarin thanks a bunch you have saved me a paragraph of boilerplate code. This answer should be the accepted answer. – qualebs Oct 25 '14 at 10:59
19

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);
forresto
  • 12,078
  • 7
  • 45
  • 64
  • 2
    This is a helpful answer for those who want something dynamic, particularly if you're using draggable elements. – dennisbest Mar 14 '13 at 01:49
1

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

airmanx86
  • 992
  • 1
  • 8
  • 16
1

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

<style type="text/css">
  #myElement {
    z-index: 50000;
  }
</style>
Gert Grenander
  • 16,866
  • 6
  • 40
  • 43
  • 3
    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. – Chris Porter Feb 24 '11 at 19:28
  • 5 years later. How do I bring a div to the front? Answer: `z-index: 5000000000000;` – teynon Nov 02 '15 at 05:45
  • Basically it has to be 1 higher than the highest `z-index` on the page. – William Isted May 03 '16 at 16:00
1
element.style.zIndex = Date.now();
U13-Forward
  • 69,221
  • 14
  • 89
  • 114
user12915978
  • 19
  • 1