Я застрял на некоторое время со следующей проблемой. Я создал сайт, который содержит наложение. Наложение помещается в HTML, как показано ниже;
<html>
<body>
<div id="overlay"></div>
<div id="wrapper">
<!--More html - snipped-->
<div id="search">
<form method="post" action="Default.aspx?id=999" id="searchForm">
<label for="searchInput">Your searchcriteria:</label>
<input type="text" id="searchInput" />
</form>
</div>
<!--More html - snipped-->
</div>
</html>
CSS для наложения и поиска div # приведен ниже. Существует немного больше CSS для стилизации элементов формы внутри поиска div #, но так как я не думаю, что это уместно, я пропустил это.
div#search
{
clear:both;
width:990px;
height:50px;
z-index:1002;
display:none;
position:absolute;
margin:49px 0px 0px 0px;
background-color:#FFF;
}
#overlay
{
background-color:#000;
position:fixed;
opacity:0.7;
display:none;
z-index:1001;
width:100%;
height:100%;
top:0;
left:0;
}
Когда пользователь щелкает элемент меню, чтобы открыть окно поиска, выполняется следующий бит javascript. Javascript - это просто концепция, но она работает.
function showSearchBar() {
//Check if search bar is shown, if it is hide it, otherwise show it.
var isVisible = $("#search").is(":visible");
if (isVisible) {
//Hide the div
$("#search").fadeOut(600);
//hide the overlay
$("#overlay").hide();
}
else {
//Show the overlay
$("#overlay").show();
//Show the hidden div
$("#search").fadeIn(600);
//$("input#searchInput").watermark("Enter your criteria");
}
}
Проблема здесь в том, что всякий раз, когда выполняется javascript, оверлей помещается вверху страницы, отключая все остальные элементы на странице, включая форму поиска. Я хочу, чтобы форма поиска была доступна пользователям, поэтому она должна быть поверх оверлея. Вероятно, это очень маленькая проблема, но я не вижу здесь проблемы. Что вызывает наложение поверх поисковой формы вместо того, чтобы поисковая форма находилась поверх оверлея?