Javascript、html和css创建覆盖_Javascript_Asp.net_Html_Css_Forms

Javascript、html和css创建覆盖

javascript asp.net html css forms

Javascript、html和css创建覆盖,javascript,asp.net,html,css,forms,Javascript,Asp.net,Html,Css,Forms,我现在被以下问题困扰了一段时间。我创建了一个包含覆盖图的网站。覆盖层放置在html中，如下所示 <html> <body> <div id="overlay"></div> <div id="wrapper">  <div id="search"> <form method="post

我现在被以下问题困扰了一段时间。我创建了一个包含覆盖图的网站。覆盖层放置在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>

当用户单击菜单项打开搜索窗口时，将执行以下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时，覆盖都会被放置在页面顶部，从而禁用页面上的所有其他元素，包括searchform。我希望用户可以使用searchform，因此它应该位于覆盖层的顶部。这可能是一个很小的问题，但我看不出这里有什么问题。是什么导致覆盖被放置在searchform上而不是searchform位于覆盖之上？

问题已解决。我修改了html，使其看起来像这样

<html>
<body>
    <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>    
    <div id="overlay"></div>
    <div id="wrapper">
        <!--More html - snipped-->
    </div>
</html>


您的搜索条件：

这是必要的，因为包装器有自己的z索引，并且是相对定位的。通过将div#search作为主体中的第一个元素，我确信它位于所有其他元素之上，因为它的绝对位置。移动html元素解决了我的问题。欢迎提出其他改进建议

<html>
<body>
    <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>    
    <div id="overlay"></div>
    <div id="wrapper">
        <!--More html - snipped-->
    </div>
</html>