Накладывается скрытый слой на кнопки формы

[rolph]

Сделал форму, в которой при выборе radio, открывается div. Но этот div накладывается на кнопки формы. Подскажите, где недоглядел.

<div id="firstdiv">
<div id="Scr1" class="hidden" >
1ый блок спрятанный
</div>
<div id="Scr2" class="hidden" >
2ой блок спрятанный
</div>
</div>

<input type="submit" class="buttons" value="Записать" />   <input type="reset" class="buttons" value="Очистить" />

#firstdiv {position:relative;}
#Scr1 {
position:absolute; 
}
#Scr2 {
position:absolute; 
}

Edited August 28, 2009 by rolph

[Justnewone]

position:relative, наверно, у инпутов или у их родителя его нет

Edited August 28, 2009 by Justnewone

[rolph]

position:relative, наверно, у инпутов или у их родителя его нет

Странно, вроде везде указал.

<form action="save_form.php" method="post" name="test_form"  style="position:relative;">
<div style="position:relative;">

<p><input type="radio" value="1" name="R" OnClick="java script:R1();" style="width:30px;position:relative;">Вариант1</p>
<p><input type="radio" value="0" name="R" OnClick="java script:R2();" style="width:30px;position:relative;">Вариант2</p>

<div style="position:relative;">
<div id="Scr1" class="hidden" >
<select>  
<option>1</option>
</select> 
<input type="radio" name="know_from" value="journal" style="width:30px;">1   
<input type="radio" name="know_from" value="internet" style="width:30px;">2   
<input type="radio" name="know_from" value="exhibition" style="width:30px;">3   
<input type="radio" name="know_from" value="friends" style="width:30px;">4   
<input type="radio" name="know_from" value="expartner" style="width:30px;">5<br>
<p>
<select>  
<option>1</option>
</select>
</p>
</div>
<div id="Scr2" class="hidden" >
<input type="radio" name="know_from" value="journal" style="width:30px;">1   
<input type="radio" name="know_from" value="internet" style="width:30px;">3   
<p><select>  
<option>1</option>
</select></p>
<p><select>  
<option>1</option>
</select></p>
</div>
</div>	
<div style="position:relative;">
<input type="submit" class="buttons" value="Записать" />   <input type="reset" class="buttons" value="Очистить" />
</div>
</form>
</div>

[Justnewone]

<p><input type="radio" value="1" name="R" OnClick="java script:R1();" style="width:30px;position:relative;">Вариант1</p>

<div style="position:relative;">

Находятся на одном уровне вложенности, у обоих общий родитель с релейтивом, у одного релейтив есть, а у другого нет. В добавок, релейтив еще и по коду идет ниже, боюсь, ни у одного браузера нету шансов.

Почитайте внимательно мануалы про релейтив и абсолют и z-index. Там все это подробно с примерами описывается, хоть в гугле, хоть тут на сайте.

Edited August 28, 2009 by Justnewone

[rolph]

<p><input type="radio" value="1" name="R" OnClick="java script:R1();" style="width:30px;position:relative;">Вариант1</p>

<div style="position:relative;">

Находятся на одном уровне вложенности, у обоих общий родитель с релейтивом, у одного релейтив есть, а у другого нет. В добавок, релейтив еще и по коду идет ниже, боюсь, ни у одного браузера нету шансов.

Почитайте внимательно мануалы про релейтив и абсолют и z-index. Там все это подробно с примерами описывается, хоть в гугле, хоть тут на сайте.

Т.е. надо для основного div'a (div формы) сделать relative, и дальше только указывать absolute, где необходимо?

[Justnewone]

Т.е. надо для основного div'a (div формы) сделать relative, и дальше только указывать absolute, где необходимо?

В первую очередь надо потратить 20 минут и почитать то, что выше написал, а затем уже пробывать то что Вы написали.

[rolph]

В первую очередь надо потратить 20 минут и почитать то, что выше написал, а затем уже пробывать то что Вы написали.

Потратил

Т.е. суть в следующем, использую для всех элементов relative, кроме, тех, которые скрываются.

А вся форма делится на слои:

— статические элементы;

— те которые скрываются;

— кнопки

Верно?

[Justnewone]

Потратил

Т.е. суть в следующем, использую для всех элементов relative, кроме, тех, которые скрываются.

А вся форма делится на слои:

— статические элементы;

— те которые скрываются;

— кнопки

Верно?

Видно что потратили, но не совсем с пользой, хотя прогресс =)

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

2. Физическая модель, релейтива и прочих абсолютов, на мой взгляд, выглядит так: Представьте себе, что вы в пленке оракал вырезали прямоугольник, отсоединили его от подложки, сместили как нибудь и приклеили сверху обратно (весь остальной лист - это просто поток, без релейтива). Будет ли "лоскуток" виден сверху всех - думаю, ответ очевиден. Это лоскуток релейтив. Теперь, мы берем в первом куске пленки отрезаем еще лоскут и наклеиваем на первый. " лоскута релейтив и один непременно будет сверху. Как раз последовательность отрезания, в данном случае, и определит, который будет сверху, это и есть z-index, чем он больше (чем позднее отрезан лоскут) тем выше он будет над всеми остальными. Теперь, представим что мы этот лоскуток наклеиваем на другой нетронутый лист, то есть поверх общего тронутого или нет потока, лоскуток в нем никакого участия не принимает. Это как бы лоскуток абсолют, и там все тоже самое с z-indexom и прочее...

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

Вы не поверите, но я практически на 100% описал все расклады, за исключением шлюков IE, которые не поддаются часто логике, тут все индивидуально.

Вооружившись знанием, сделайте теперь так, как Вам надо. И релдейтивом без надобности не злоупотребляйте, есть еще отриц. маргины, которые очень чато могут его заменить если речь только о позиционировании.

Edited August 28, 2009 by Justnewone

[rolph]

Justnewone,спасибо, буду теперь разбираться.

Уважаю таких специалистов, которые находят несколько минут, чтобы разъяснить в каком направлении идти...

Ещё раз спасибо. О результатах отпишусь тут.

PS: С пленкой отличный пример!

Edited August 28, 2009 by rolph

[rolph]

Justnewone, правильно ли я понимаю...

Что у родительского div'a(который relative и прячет блоки), должен z-index быть равным z-index'у блока с кнопками?

[Justnewone]

Justnewone, правильно ли я понимаю...

Что у родительского div'a(который relative и прячет блоки), должен z-index быть равным z-index'у блока с кнопками?

Давайте-ка я тоже начну понимать )))

Ван надо было что в результате? ЧТобы кнопки торчали через эти самые дивы? )

ЧТо хотите получить?

[rolph]

Давайте-ка я тоже начну понимать )))

Ван надо было что в результате? ЧТобы кнопки торчали через эти самые дивы? )

ЧТо хотите получить?

В конечном итоге хотелось бы видеть, чтобы после div'a в котором 2 блока, которые показываются при определенном виде, были кнопки... А не под блоком.

[Justnewone]

В конечном итоге хотелось бы видеть, чтобы после div'a в котором 2 блока, которые показываются при определенном виде, были кнопки... А не под блоком.

)))

Тогда все просто убираем вообще везде релейтивы и абсолюты, что так открывает и скрывает... вобщем, делаем блоку бывшему асолют дисплей ноне или блок )))

Ох, увел в сторону, и каждый раз думал, что-то странно все... )))

[rolph]

)))

Тогда все просто убираем вообще везде релейтивы и абсолюты, что так открывает и скрывает... вобщем, делаем блоку бывшему асолют дисплей ноне или блок )))

Ох, увел в сторону, и каждый раз думал, что-то странно все... )))

Заработало

Спасибо.

Для остальных

Сделал:

.hidden {display:none;}
.visible {display:block;}