Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 204
anthonypliu Avatar asked Jul 13 '10 00:07

anthonypliu


People also ask

How do I bring a div to the front?

Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values. Note that for this to work, you also need to set a position style ( position:absolute , position:relative , or position:fixed ) on both/all of the elements you want to order.

How do I bring a div to the top?

In order to pull an html element out of the natural flow of how the elements are layed out on the screen you need to use position: absolute. This will allow the element to become a layer above the other elements (assuming that the z-index value is greater than all other's).

What does prepend do in jQuery?

prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use . append() ).

What is append and prepend in jQuery?

append() & . prepend() .append() puts data inside an element at the last index; while. . prepend() puts the prepending element at the first index.


2 Answers

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'); 
like image 62
Kerry Jones Avatar answered Oct 06 '22 01:10

Kerry Jones


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?

like image 39
Yarin Avatar answered Oct 06 '22 01:10

Yarin