Question

I was wondering if it is possible and if so if something exists that works with a stack of elements to put a relative element on top of everything else? (Z-index)

Something along the lines of:

$('myElement').moveToFront();

Provided my knowledge is accurate this would mean walking the tree of elements and altering Z-indexes such that the element and it’s parents are on top of the others. I would rather not reinvent the wheel or find out that it is an impossible wheel to invent. Does something exist that does this?

Answer 1

How about that.

DEMO

http://jsfiddle.net/insertusernamehere/KNB2f/

Note: The demo works only one way (didn’t write the “restore”-function). If you have tried a link, reload the page.

Basic Idea

// clone the element and get its current position
var copy        = e.clone();
var position    = e.offset();

// set the position and a high z-index on the copy
copy    .css('position', 'absolute')
        .css('z-index', '1000')
        .css('top', position.top)
        .css('left', position.left);

// append the copy directly to the body
body.append( copy );

// hide the original element, but leave the document flow intact
e.css('visibility', 'hidden');

Restore/undo this by:

• removing the copy
• show the original element again