Question

我有一个搜索框，可通过ajax调用从php服务器端搜索并显示数据。它工作正常。我的问题是，我无法使搜索记录显示在 div 1 和 div 2 的前面。我正在使用引导程序3。我已经在CSS中添加了

z-index：999; 位置：相对；

而不是显示在 div 1和2 前面的记录。它将 div 1和2 向下推。

好吧，如果将行div 外壳 div1和div2 设置为 position：absolute 。 css代码将按预期工作，但同时挤 div 1和2 的成本很高。对此的任何解决方案将不胜感激。

下面是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".search").keyup(function() 
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;

if(searchbox=='')
{
}
else
{

$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{

$("#display").html(html).show();


    }




});
}return false;    


});
});

</script>
<style type="text/css">
body
{
font-family:"Lucida Sans";

}
*
{
margin:0px
}
#searchbox
{
width:250px;
border:solid 1px #000;
padding:3px;
}
#display
{
z-index:999;
position: relative;
 //z-index:1000;
width:250px;
display:none;
float:left; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box;

{
padding:4px; border-top:solid 1px #dedede; font-size:12px; height:30px;
}

.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
#shade
{
background-color:#00CCFF;

}

</style>



</head>
<body>


<b>search tony1 or anything</b><br>
<input type="text" class="search" id="searchbox" /><br />
<div id="display">
</div>

<div class="container">

  <div class="row"  style="">
    <div class="col-sm-3" style="background-color:#cccccc;margin-top:0px;">

<h3>div 1 = 25%</h3><br>
<h3>div 1 = 25%</h3><br>
<h3>div 1 = 25%</h3><br>
<h3>div 1 = 25%</h3><br>
<h3>div 1 = 25%</h3><br>
<h3>div 1 = 25%</h3><br>
<h3>div 1 = 25%</h3><br>
<h3>div 1 = 25%</h3><br>
</div>



    <div class="col-sm-9" style="background-color:blue;margin-top:0px;">


<h3>div 2 = 75%</h3><br>
<h3>div 2 = 75%</h3><br>

<h3>div 2 = 75%</h3><br>

<h3>div 2 = 75%</h3><br>

<h3>div 2 = 75%</h3><br>

<h3>div 2 = 75%</h3><br>
<h3>div 2 = 75%</h3><br>

<h3>div 2 = 75%</h3><br>


</div>

</div>
</div>



</body>
</html>

这是PHP服务器端

<?php

if($_POST)
{

$q=$_POST['searchword'];
$fname1 ='tony1';
$fname2 ='tony2';
$fname3='tony3';
$fname4 ='tony4';
$fname5 ='tony5';
$fname6 ='tony6';
$fname7 ='tony7';
$fname8 ='tony8';

?>


<div  class="display_box" align="left">

<img src="user_img/sru.jpg" style="width:25px; float:left; margin-right:6px" />
<?php echo $fname1; ?>&nbsp;<?php echo $fname2; ?><br/>
<span style="font-size:9px; color:#999999"><?php echo $fname3; ?></span><br>
<img src="user_img/sru.jpg" style="width:25px; float:left; margin-right:6px" />
<?php echo $fname4; ?>&nbsp;<?php echo $fname5; ?><br/>
<span style="font-size:9px; color:#999999"><?php echo $fname6; ?></span>


</div>



<?php
}
?>

Answer 1

将位置设置为固定，高度设置为100％或自动解决问题

#display
{
z-index:999;
position: fixed;
height:100%;

谢谢。

使用CSS和引导程序的div记录未显示在其他div内容的前面

1 个答案: