Проблема со слоями css
 

Начну с самой проблемы и задачей которую необходимо реализовать. Пишу опросник, где каждый вопрос должен отображатся отдельно и иметь индивидуальный стиль, но не нашев ничего подходящего в инете решил написать сам. Но столкнулся с кучей проблем(опишу основную) Задача состоит в том, что есть несколько слоев допустим их 10 в начале у каждого из них z-index равен 1. Нужно чтобы с благодаря z-indexу слои пролистывались.
Это JS

var i;
var mas = [];
for (i =0;i=10;i++){
    mas[i]=i;
}
function on(){
    for (i = 0; i=10; i++ {
        if(mas[i]>mas[i+1]){
            var z = document.getElementById(i+1);
            z.style.zIndex = i+1;
        }else {
            var z = document.getElementById(mas['1']);
            z.style.zIndex = '1';
        }
        }
}

И html

<div id="3" class="box3">awdasdasd</div>
<div id="2" class="box2">sedsefe</div>
<div id="1" class="box">awdawd</div>
<br>
<div class="box0" style="margin: 100px;">
<a href="javascript:on();">Изменить z-index</a></div>

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

Просто выставляй слою, который нужно отобразить больший индекс, чем изначальный. Нет необходимости менять индексы всем слоям.

Еще раз повторюсь. Мне нужно чтобы скрипт по нажатию кнопки менял zindex на +1 следущего слоя. А вообще я просто попросил проверить мой код который по неизвестным мне причинам просто отказывается работать

Так почему тогда у тебя в коде какой-то цикл? Ты же сам говоришь - менять zindex следующего слоя, то есть одного, а не всех.
Для одного слоя не нужен цикл, ты что-то перемудрил в коде, вот он и не работает.

Voivod0, danik.js правильно вам говорит...
а по поводу вашего кода...цикл будет работать пока выполняется второе условие (в вашем случае i = 10), а как мы можем видеть на первой же итерации условие не выполняется...

А чем css display: block/none не угодил? z-index в IE чудит.

Всем спасибо) цикл действительно ненужен. Код вышел довольно простой но зато отлично работает.

var i=1;
function next(){
    ++i;
    var min = 1, max = 6;
    var rand = min - 0.5 + Math.random()*(max-min+1)
    rand = Math.round(rand);
    var z=document.getElementById(i);
    z.className="box-" +rand;
    z.style.zIndex=1+i;
    z=document.getElementById(i-1);
    z.style.opacity=0;
    
}