我有一个包含菜单的 div 和另一个用于搜索框的 div。每当我在搜索框中键入内容时，结果都在菜单 div 的下方
顺便说一句。我使用 Sergey Pimenov 的 Metro UI
这是我在主页上的代码:
<html>
<head>
<!--metadata-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="Jan Adrian Fetizanan, Philippines, Manila">
<!--stylesheets-->
<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<link href="js/prettify/prettify.css" rel="stylesheet">
<!--Javascripts-->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/jquery/jquery.mousewheel.js"></script>
<script src="js/jquery/jquery.dataTables.js"></script>
<script src="js/prettify/prettify.js"></script>
<!-- UI plugin -->
<script src="js/load-metro.js"></script>
<script>
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
<style>
.container {
width: 1040px;
}
</style>
<title>EUG</title>
</head>
<body class="metro">
<div class="container">
<header class="margin20 nrm nlm">
<div class="clearfix">
<a class="place-left">
<h1>TEST</h1>
</a>
<div class="place-right">
<form>
<div class="input-control text size6 margin20 nrm bg-white">
<input type="text" name="q" placeholder="Search..." onkeyup="showResult(this.value)">
<div class="element" id="livesearch"></div>
</div>
</form>
</div>
</div>
<div class="main-menu-wrapper">
<ul class="horizontal-menu nlm">
<li><a href="#">eug</a></li>
<li><a href="#">shipping</a></li>
<li><a href="#">tracking</a></li>
<li><a href="#">freight</a></li>
<li><a href="#">location</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
</header>
<div class="main-content clearfix">
<div class="grid fluid">
<div style="float: right; ">
<div class="span3">
<div class="panel">
<div class="panel-header bg-lightBlue">
TESTING
</div>
<div class="panel-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
这是来自 livesearch.php 的代码
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
最佳答案
你可以尝试添加
document.getElementById("livesearch").style.zIndex="1000";
注意: z-index仅适用于定位元素(position:absolute、position:relative 或 position:fixed)。
将它设置为 1000，这样它就有希望成为最顶层的元素
关于css - 将 div 定位在另一个 div 之下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22030490/