Выпадающее меню и инпуты

Renert · July 23, 2007

Здравствуйте, на сайте есть выпадающее меню, и ниже, идут инпуты, однако, слой с меню всегда оказывается ниже слоя с инпутом, z-index менял, не помогает. Есть какой-нибудь способ обойти это?

Emm · July 23, 2007

чо, выпадающее меню накрывает инпуты?

Renert · July 23, 2007

Наоборот, инпуты накрывают слой с меню

strix · July 23, 2007

для какого элемента применяли z-index? поместите всю форму в слой с z-index

Renert · July 23, 2007

применил z-index для всей формы = -10, для меню = 10 и все равно инпуты накрывают меню

strix · July 23, 2007

а если при появлении меню просто скрывать слой с формой скриптом?

Renert · July 23, 2007

это будет абсолютно не то что нужно

Нужно чтобы просто меню было поверх всех слоев.

Emm · July 23, 2007

а если при появлении меню просто скрывать слой с формой скриптом?

strix · July 23, 2007

Emm, Вас насмешил мой вариант? Предложите свой ...

В ряде случаев помогает использование display:none.

Автору топика:

.outer-form *{z-index:-10;}

....

<div class="outer-form">
 <form>
 <input type="text" value="value">
 </form>
</div>

Tokolist · July 23, 2007

готовое решение

<html>
<head>
<style type="text/css">
body {
 margin: 0;
 padding: 0;
}

form {
 margin: 0;
 padding: 0;
}

select {
 width: 200px;
}

#hint {
 display: none;
 position: absolute;
 left: 50px;
 top: 20px;
 width: 100px;
 height: 100px;
 border: 1px solid #000;
 background-color: #eee;
}

#hover {
 width: 200px;
 height: 20px;
 background-color: orange;
}
</style>
<script type="text/javascript">
var frameHack;

showHint = function(show) {
 var hintDiv = document.getElementById("hint");
 frameHack.style.display = hintDiv.style.display = show ? "block" : "none";
}
</script>
</head>
<body>
<script type="text/javascript">
frameHack = document.createElement("iframe");
frameHack.style.display = "none";
frameHack.style.position = "absolute";
frameHack.style.left = "50px";
frameHack.style.top = "20px";
frameHack.style.width = "100px";
frameHack.style.height = "100px";
document.getElementsByTagName("body")[0].appendChild(frameHack);
</script>

<div id="hint">test</div>
<div id="hover" onMouseOver="showHint(true)" onMouseOut="showHint(false)">Move mouse HERE :)</div>
<form action="#">
<select name="test" size="5" multiple>
 <option value="1" selected>Item 1</option>
 <option value="2">Item 2</option>
 <option value="3" selected>Item 3</option>
 <option value="4">Item 4</option>
 <option value="5">Item 5</option>
</select>
</form>
</body>
</html>

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

Я же создал только пример, который вы видите выше.

iRabbit · August 5, 2007

Здравствуйте, на сайте есть выпадающее меню, и ниже, идут инпуты, однако, слой с меню всегда оказывается ниже слоя с инпутом, z-index менял, не помогает. Есть какой-нибудь способ обойти это?

Хоть бы HTML с CSS показал

Renert · August 6, 2007

вс?, нашел решение. очень простое и интересное.

iRabbit · August 6, 2007

вс?, нашел решение. очень простое и интересное.

Рад за тебя.

Maslakoff · August 6, 2007

Renert, похвалился решением и все... в лесс... не, брат, ты жадный... делись....!

Renert · August 7, 2007

да ничего я не жадный, пример смотрите тут, а мой сайт - Бест Аутдор наружная реклама. Сильно сапогами не пинайте, ибо я в принципе не дезигнер, и не веб-прогер.

Maslakoff · August 7, 2007

Renert, а мы и не будем пинать)) принципе, нормальноый сайт

Renert · August 7, 2007

Спасибо

Sign In

Выпадающее меню и инпуты

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information