为什么在执行slideUp时我的h1标题隐藏在输入框后面

Question

我有以下页面，这是一个wikisearch页面，它向多个wikipidia页面查询搜索词。 该页面的标题和输入框位于中间位置。 但是，当我单击botton时，标题会向上滑动，因此输入框也是如此。 但是输入框会一直向上滑动以覆盖标题。 我认为！...如何防止输入框覆盖标题？ 或使标题停留在页面顶部？ 谢谢

 $(document).ready(function() { //bringing focus to search box window.load = function() { document.getElementById("search-box").focus(); }; //listener for search button $("#search").click(function() { $("#title").slideUp(3000); // $("#title").css("text-align", "left"); search(); }); function search() { //grabbing the id of search result div var srchResult = document.getElementById("results"); //string entered by user for search var searchStr = document.getElementById("search-box").value; //replace space with _ in search query searchStr = searchStr.replace(" ", "_"); console.log(searchStr); $.ajax({ url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + searchStr + "&prop=info&inprop=url&utf8=&format=json", dataType: "jsonp", success: function(response) { if (response.query.searchinfo.totalhits === 0) { showError(searchStr); } else { displayResults(response); } }, error: function() { alert("Something went wrong.. <br>" + "Try again!"); } }); function displayResults(response) { console.log(response.query); var search = response.query.search; var srchLength = response.query.search.length; srchResult.innerHTML = ""; // console.log(srchResult.innerHTML); //pulling title and searchbox to top // $("#title").css("margin-top:", "10px !important"); for (var i = 0; i < srchLength; i++) { srchResult.innerHTML += '<div class="output"><h4><a href="https://en.wikipedia.org/wiki/' + search[i].title.replace(' ', '_') + '" target="_blank">' + search[i].title + '</a> </h4><p>' + search[i].snippet + '</p></div>'; } } return false; } function showError(search) { srchResult.innerHTML = '<div class="output text-center"><h4>No Search result for: ' + search + '</h4></div>'; } }); 

 body { background-color: #495444; } search-input { width: 90%; } center { align-left: auto; align-right: auto; text-align: center; } .output { background-color: white; border-color: black; border-width: 1px; border-style: solid; opacity: 0.5; margin-top: 10px; } h1 { margin-top: 200px; color: #1484e5; font-family: 'Josefin Sans', sans-serif; font-size: 50px; padding-bottom: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> <div class="container "> <h1 id="title" class="text-center"><strong>WikiSearch</strong></h1> <div id="input" class="input-group col-lg-8 offset-lg-2 col-md-8 offset-md-2 col-xs-12"> <input id="search-box" type="text" class="form-control" placeholder="Search Wikipidia Pages!..." /> <button id="search" class="btn btn-primary" onclick="#">Search</button> </div> <div id="results" class="col-lg-8 offset-lg-2"> </div> </div> 

Answer 1

打算使用$('#title').slideUp(3000)尝试使用$('#title').animate({'margin-top': '0'}, 3000);

然后标题将保留。

另外，您可能想从<button id="search" class="btn btn-primary" onclick="#">Search</button>删除onclick="#"

下面的例子。

 $(document).ready(function() { //bringing focus to search box window.load = function() { document.getElementById("search-box").focus(); }; //listener for search button $("#search").click(function() { $('#title').animate({'margin-top': '0'}, 3000); //$("#title").slideUp(3000); // $("#title").css("text-align", "left"); search(); }); function search() { //grabbing the id of search result div var srchResult = document.getElementById("results"); //string entered by user for search var searchStr = document.getElementById("search-box").value; //replace space with _ in search query searchStr = searchStr.replace(" ", "_"); $.ajax({ url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + searchStr + "&prop=info&inprop=url&utf8=&format=json", dataType: "jsonp", success: function(response) { if (response.query.searchinfo.totalhits === 0) { showError(searchStr); } else { displayResults(response); } }, error: function() { alert("Something went wrong.. <br>" + "Try again!"); } }); function displayResults(response) { var search = response.query.search; var srchLength = response.query.search.length; srchResult.innerHTML = ""; // console.log(srchResult.innerHTML); //pulling title and searchbox to top // $("#title").css("margin-top:", "10px !important"); for (var i = 0; i < srchLength; i++) { srchResult.innerHTML += '<div class="output"><h4><a href="https://en.wikipedia.org/wiki/' + search[i].title.replace(' ', '_') + '" target="_blank">' + search[i].title + '</a> </h4><p>' + search[i].snippet + '</p></div>'; } } return false; } function showError(search) { srchResult.innerHTML = '<div class="output text-center"><h4>No Search result for: ' + search + '</h4></div>'; } }); 

 body { background-color: #495444; } search-input { width: 90%; } center { align-left: auto; align-right: auto; text-align: center; } .output { background-color: white; border-color: black; border-width: 1px; border-style: solid; opacity: 0.5; margin-top: 10px; } h1 { margin-top: 200px; color: #1484e5; font-family: 'Josefin Sans', sans-serif; font-size: 50px; padding-bottom: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> <div class="container "> <h1 id="title" class="text-center"><strong>WikiSearch</strong></h1> <div id="input" class="input-group col-lg-8 offset-lg-2 col-md-8 offset-md-2 col-xs-12"> <input id="search-box" type="text" class="form-control" placeholder="Search Wikipidia Pages!..." /> <button id="search" class="btn btn-primary">Search</button> </div> <div id="results" class="col-lg-8 offset-lg-2"> </div> </div> 

Answer 2

将此添加到h1类

h1 {
  z-index: 1000;
}

现在，假设您需要一些内容然后放在标题的顶部，您可以为该元素的类赋予z-index大于1,000的值，因此可能是1,001！ 如果您需要保留某些东西，只需将其设为999或更低即可。 使用1,000，可以在任一方向（+/-）上使用很多自由范围。