Javascript，html和css創建一個覆蓋

我卡住了一段時間，現在有以下問題。我創建了一個包含疊加層的網站。疊加層放置在html中，如下所示。Javascript，html和css創建一個覆蓋

<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>

疊加和div＃搜索的CSS如下。 div＃search中的表單元素的樣式更多一些，但是由於我認爲它沒有關係，所以我將其忽略了。

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的覆蓋被放置在禁用頁面上的所有其他元素，包括searchform頁面的頂部。我希望搜索表單可供用戶使用，因此它應該位於疊加層之上。這可能是一個非常小的問題，但我在這裏看不到問題。什麼導致覆蓋層被放置在搜索表單上，而不是覆蓋層之上的搜索表單？

來源

2011-05-03 Rob

問題已解決。我修改了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元素解決了我的問題。歡迎提出其他改進建議。

來源

2011-05-03 11:05:56 Rob

Javascript，html和css創建一個覆蓋

回答

相關問題