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

Question

Hi, 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?

Answer 1

 $(div).css('z-index', 10001);

Answer 2

Yes, very much so.

HTML:

<div>foo</div>
<div>bar</div>
<div>bas</div>

Javascript:

//Collect all divs in array, then work on them
var ALL = document.selectElementsByTagName("DIV");
var prev = false;

for(i=0;x<ALL.length;i++) {
  ALL[i].onclick = function() {
    ALL[i].style.position = 'relative'; //necessary to use z-index
    if(prev) { prev.style.zIndex = 1; }
      this.style.zIndex = 1000;
      prev = this;
    }
  }
}

//Edit: Sorry, forgot a brace. Corrected now.

Answer 3

Yes you can do it using javascript. jQuery will help you better in this. Check this. Do want something like this only right?