Привет всем!

Задача: мне нужно сделать сдвиг слоев, т.е. пользователю задается вопрос, и предлагаются варианты ответов. При выборе ответа, появляется следующий вопрос с вариантами ответа. Все вопросы находятся в div-ах, и естественно не видны пока пользователь не выберет ответ. Также они сдвинуты в виде лестницы, т.е. следующий появляется правее предыдущего. Организовал это так <div id="div1" style="display: none;position:relative;left:5%;z-index:1">.

Проблема: при попытке раскрыть все ответы, некоторые из предыдущих пропадают (становяться не видны).

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

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

Вот код для примера:

    <script>
        function show(toShow) {
            var t_show = document.getElementById(toShow);
            if(t_show.style.display=="none") t_show.style.display = "";
            else t_show.style.display="none";
         }
    </script>
    
    <a href="java script:show('div1')"><b>div1</b></a> <br>
        <div id="div1" style="display:none;position:relative;left:5%;z-index:1">
        <table width="95%" border="1">
        <tr><td>
            div1<br>
            <a href="java script:show('div2')"><b>div2</b></a> <br>
            <div id="div2" style="display: none;position:relative;left:5%;z-index:1">
            <table width="95%" border="1">
            <tr><td>
                div2<br>
                <a href="java script:show('div3')"><b>div3</b></a> <br> 
                <div id="div3" style="display: none;position:relative;left:5%;z-index:1">
                <table width="95%" border="1">
                <tr><td>
                    div3<br>
                </td></tr>
                </table>
                </div>
                <a href="java script:show('div4')"><b>div4</b></a> 
                <div id="div4" style="display: none;position:relative;left:5%;z-index:1">
                <table width="95%" border="1">
                <tr><td>
                    div4<br>
                </td></tr>
                </table>
                </div>
            </td></tr>
            </table>
            </div>
            <a href="java script:show('div5')"><b>div5</b></a>
            <div id="div5" style="display: none;position:relative;left:5%;z-index:1">    
            <table width="95%" border="1">
            <tr><td>
                div5<br>
                <a href="java script:show('div6')"><b>div6</b></a> <br>
                <div id="div6" style="display: none;position:relative;left:5%;z-index:1">
                <table width="95%" border="1">
                <tr><td>
                    div6<br>
                </td></tr>
                </table>
                </div>
                <a href="java script:show('div7')"><b>div7</b></a> 
                <div id="div7" style="display: none;position:relative;left:5%;z-index:1">
                <table width="95%" border="1">
                <tr><td>
                    div7<br>
                </td></tr>
                </table>
                </div>
            </td></tr>
            </table>
            </div>
        <br><br>
        </td></tr>
        </table>
        </div>
    <a href="java script:show('div8')"><b>div8</b></a> <br>
        <div id="div8" style="display:none;position:relative;left:5%;z-index:1">
        <table width="95%" border="1">
        <tr><td>
            <a href="java script:show('div9')"><b>div9</b></a>
            <div id="div9" style="display: none;position:relative;left:5%;z-index:1">    
            <table width="95%" border="1">
            <tr><td>
                div9<br>
                <a href="java script:show('div10')"><b>div10</b></a> <br>
                <div id="div10" style="display: none;position:relative;left:5%;z-index:1">
                <table width="95%" border="1">
                <tr><td>
                    div10<br>
                </td></tr>
                </table>
                </div>
                <a href="java script:show('div11')"><b>div11</b></a> 
                <div id="div11" style="display: none;position:relative;left:5%;z-index:1">
                <table width="95%" border="1">
                <tr><td>
                    div11<br>
                </td></tr>
                </table>
                </div>
            </td></tr>
            </table>
            </div><br>
            <a href="java script:show('div12')"><b>div12</b></a>
            <div id="div12" style="display: none;position:relative;left:5%;z-index:1">    
            <table width="95%" border="1">
            <tr><td>
                div12<br>
            </td></tr>
            </table>
            </div>        
        <br>
        </td></tr>
        </table>
        </div>
    <br>

Для: MiXOH
не совсем понятна проблемма ...
а зачем тут z-index:1 ?

z-index:1 это для другой части скрипта, в этом примере кода можно опустить (лень было удалять).
Проблема в том, что пропадает информация, пропадает в смысле перестает отбражаться.
Если, Вы, создадите страничку и вставите туда код из примера, и попробуете раскрыть все div-ы, то, Вы, увидите, что некоторая информация будет исчезать, а должна отображаться. В этом и суть проблемы.

Для: MiXOH
или я чегото не понимаю, или ... но у меня ничего не пропадает
(открыл все 12 дивов)

а нет, заметил, в ие пропадает ... в фф все ок

причина position:relative; вроде как, попробуйте убрать

Для: sax_ol
Большое спасибо!!!

Ваш ответ натолкнул меня на мысль и я решил проблему.
Насамом деле, ничего убирать не надо (если убрать, то дивы не будут распологаться в виде лестницы, а будут идти просто друг под другом).
Надо наоборот, добавит в свойства таблицы style="position:relative;", и после этого все работает как надо.

Для: MiXOH
ну может и так
хотя по мне, так бы таблицы убрал ... но полную картину знаете только вы

Для: sax_ol
Таблицы нужны! Т.к. див смещается в лево и если в нем много информации то она выходит за правую границу экрана, а скролинг горизонтальный НЕ ПОЯВЛЯЕТСЯ. Поэтому, при использовании таблицы внутри дива с width = (100% - (смещение дива)) информация распологается на странице (получается, что правая граница таблицы проходит по правой границе окна).