Javascript код и ZIndex

Question

У меня возникли проблемы с получением ZIndex изменить с помощью JavaScript может ли один помочь мне о том, где я неправильно,

, что я пытаюсь сделать, это окно появляется на вершине на другой коробке, когда нажата кнопка, но она не работает.

function toggleupload(){ 
      var but = document.getElementById('picbutton').innerHTML; 
      if (but == "Change Picture"){ 
          document.getElementById('picbutton').innerHTML = "Hide upload box"; 
          document.getElementById('uploadbox').style.zIndex = 2; 
          document.getElementById('profilebasic').style.zIndex = 1; 
      } 
      if (but == "Hide upload box"){ 
          document.getElementById('picbutton').innerHTML = "Change Picture"; 
          document.getElementById('uploadbox').style.zIndex = 1; 
          document.getElementById('profilebasic').style.zIndex = 2; 
      } 

} 




#profilebasic{ 
      width:300px; 
      height:300px; 
      z-index:2; 
      background-color:#0F0; 

} 
#uploadbox { 
      position:absolute; 
      top:0px; 
      left:0px; 
      width:300px; 
      height:300px; 
      z-index:1; 
      background-color:#F00; 

} 
#uploadbo{ 
      text-align:center; 
      width:300px; 
      height:300px; 
      z-index:3; 

} 




<div id="uploadbo"> 
<div id="profilebasic"> 
</div> 
<div id="uploadbox"> 
</div> 
<button onclick="toggleupload();" id="picbutton">Change Picture</button> 
      </div> 

Answer 1

z-index свойство only works on positioned elements, так что вам нужно явно установить позицию на profilebasic как:

#profilebasic { 
    width:300px; 
    height:300px; 
    z-index:2; 
    background-color:#0F0; 
    position:absolute; 
} 

jsFiddle example

(обратите внимание, что я также должен был установить некоторые CSS на ваш , иначе он оказался бы под вашими позициями.)

Answer 2

С uploadbox уже начинается спереди. Я предполагаю, что вы захотите обменять их.

Основываясь на правилах z-index, абсолютно позиционированный div по-прежнему будет отображаться перед не-абсолютно позиционированным div, если его значение z-индекса не будет отрицательным.

То есть, используйте отрицательный индекс z для окна, в котором вы хотите быть позади.

http://jsfiddle.net/X54gr/