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

user_392373 0
Viewed 43501

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?

z-index javascript
7 Answers

This worked for me (a modified version of Ben's solution, because it generated so many errors). When you click the element, it should go to the top. Hope it helps!

var allDivs = document.getElementsByTagName("div"); //Changed variable name to 'allDivs' because the name 'all' generated an error.
var prev = false;

for(ii = 0; ii < allDivs.length; ii++) { // changed the for variable to 'ii' instead of 'i'  so i can find it easier (searching for 'i' will return avery instance of the letter i, even inside words, not just the variable, whereas ii is unique).
    allDivs[ii].onclick = function() {
  this.style.position = 'absolute'; //You have to have a position type defined. It doesn't matter what type, you just have to. If you define it elsewhere in your styles you can remove this.
        if (prev) { prev.style.zIndex = 1; }
        this.style.zIndex = 1000;
        prev = this;
    }
}
div {
  padding:20px;
  border:2px solid black;
  border-radius:4px;
}
#d4 {
  background-color:lightblue;
  position:absolute;
  top:30px;
  left:20px;
}
#d3 {
  background-color:lightgreen;
  position:absolute;
  top:70px;
  left:20px;
}
#d2 {
  background-color:yellow;
  position:absolute;
  top:30px;
  left:70px;
}
#d1 {
  background-color:pink;
  position:absolute;
  top:70px;
  left:70px;
}
<html>
  <div id="d1">div1</div>
  <div id="d2">div2</div>
  <div id="d3">div3</div>
  <div id="d4">div4</div>

</html>

user_105685470

This is what worked for me. It traverses all elements on the page and increases the max z-index by 1.

Note that this method still works when there have been dynamically increased z indices on the page as well:

function bring_to_front(target_id) {    
    const all_z = [];
    document.querySelectorAll("*").forEach(function(elem) {
        all_z.push(elem.style.zIndex)
    })
    const max_index = Math.max.apply(null, all_z.map((x) => Number(x)));
    const new_max_index = max_index + 1;
    document.getElementById(target_id).style.zIndex = new_max_index;
}

Simply pass-in the id of the element you wish to bring to the front.

user_16395940
Related