12

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?

0

7 Answers 7

12

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.

1
  • 1
    This is what probably most of the people is looking for. Apr 24, 2022 at 19:12
10

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; i < 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.

1
  • 1
    Never knew z-index depended on position: relative I just thought it had issues... that is the important part here. Oct 15, 2015 at 16:11
6

I recommend setting a variable at the beginning and incrementing that.

var top_z = 10;

function bringToTop(element)
{
    element.style.zIndex = ++top_z;
}

(++top_z increments and then returns top_z)

0

I would do something like that:

var my_index = 100; //global var on page
function sendontop(div_id) {
  if (typeOf(div_id)=="string") {
    div_id=document.getElementById(div_id);
  }
  div_id.style.zIndex = my_index++;
}

on the object

<div id="bringmeup" onclick="sendontop(this);" >somecontent</div>

or otherwise you can also use

sendontop("bringmeup");

i came across this problem and solved like that

0

Hope it helps!

document.getElementById("mainactiondiv").firstElementChild.appendChild(bubble);
0

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>

0

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.