How to bring the selected div on top of all other div's

javascript, z-index

Solution

In some cases, you can bring an element to top without using CSS directly. If you place your DIVs to the body tag or under another parent element, you can re-append itself to the parent. JavaScript will move it to the last position in the child list which will bring the element in a "natural" way to the top.

Example:

myElement.parentNode.appendChild(myElement);

I used this trick for my custom context menu. Works without zIndex.

Problem

I have a bunch of divs on the screen. What I want to do is, when I select any div, I want its zIndex to be always higher than all other divs. In my application, i will need to do this repeatedly whenever I select a div, put it on top of others. Is this possible using Javascript?

Original source