easy way of ensuring one element is always in front of everything else?

Question

on a website I want to have an element take up the entire space of the screen (after an event), but I can't seem to manage to get it in front of all the other elements on my website. Do I have to set positions and z-indexes for everything or is there another way of setting the element I want in front of everything else?

possible duplicate of [Mininum and Maximum value of Z-INDEX](http://stackoverflow.com/questions/491052/mininum-and-maximum-value-of-z-index) — rvighne, Jan 01 '15 at 02:50

score 0 · Answer 1 · edited Jan 01 '15 at 02:46

0

If you want this thing always on top, just set its z-index to 999 (or something higher than you know everything else is).

edited Jan 01 '15 at 02:46

rvighne

20,755
11
51
73

answered Jan 01 '15 at 01:50

Brian McCall

1,831
1
18
33

score 0 · Answer 2 · answered Jan 01 '15 at 02:42

Brute force.

function getMaxZ() {
  var all = document.querySelectorAll('*');
  var len = all.length;
  var maxZ = 0;
  var dv = document.defaultView;
  for (var i = 0; i < len ; i++) {
    var el = all[i];
    var thisZ = el.currentStyle ? el.currentStyle : dv.getComputedStyle(el, null);
    thisZ = thisZ.zIndex.replace(/[^\d]/,'') * 1;
    if (thisZ > maxZ) maxZ = thisZ;  
  }
  return maxZ;
}

alert(getMaxZ());

easy way of ensuring one element is always in front of everything else?

2 Answers2