jQuery與我的其他元素在頁

重疊我用下面的代碼顯示建議wile打字。它運行良好，但我的其他元素與我的搜索建議重疊。我該如何解決這個問題？jQuery與我的其他元素在頁

守則<head>：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"> 
</script> 

    <script> 
    function suggest(inputString){ 
      if(inputString.length == 0) { 
       $('#suggestions').fadeOut(); 
      } else { 
      $('#country').addClass('load'); 
       $.post("search.php", {queryString: ""+inputString+""}, function(data){ 
        if(data.length >0) { 
         $('#suggestions').fadeIn(); 
         $('#suggestionsList').html(data); 
         $('#country').removeClass('load'); 
        } 
       }); 
      } 
     } 

     function fill(thisValue) { 
      $('#country').val(thisValue); 
      setTimeout("$('#suggestions').fadeOut();", 600); 
     } 

    </script>

的search.php：

<?php 
    include('inc/config.php'); 
include('inc/func.php'); 

    $queryString=$_POST['queryString']; 
     if(isset($_POST['queryString'])) { 

      if(strlen($queryString) >0) { 

       $query = mysql_query("SELECT person_id,name,type,photo FROM person WHERE name LIKE '$queryString%' or person_id like '$queryString%' LIMIT 5"); 
       if($query) { 
       echo '<ul>'; 
        while ($result = mysql_fetch_array($query)) { 

         ?> 
         <li> 
         <a href="view"> 


         <table> 
         <tr> 
          <td> 
          <img src="<?php if($result['photo']=="0"){ echo "data/img/default.png";}else{ echo $result['photo'];}?>" width="60px" height="60px"> 
          </td> 
          <td width="20px"> 

          </td>   
          <td valign="top"> 
          <h2><?php echo $result['name'];?></h2> 
          <h4><?php if($result['type']=='1'){echo "Staff";}elseif($result['type']=='2'){echo "Parent";}else{echo "Student";}?></h4> 
          </td> 
          <td> 
          &nbsp; 
          </td> 
          <td> 
          &nbsp; 
          </td> 
          <td> 
          &nbsp; 
          </td> 
          <td valign="top"> 
          <h4> 
          <?php 
          if($result['type']=='3') 
          { 
          echo "Roll No: ".get_data('student','rollno',$result['person_id']); 
          } 
          ?> 
          </h4> 
          <h4> 
          <?php 
          if($result['type']=='3') 
          { 
          $section_id=get_data('student','section_id',$result['person_id']); 
          $section_name=get_data('section','name',$section_id); 
          $class_id=get_data('section','class_id',$section_id); 
          $class_name=get_data('class','name',$class_id); 
          echo "Class: ".ucfirst($class_name)."(".$section_name.")"; 
          } 
          ?> 
          </h4> 

          </td> 
         </tr> 

         </table> 

         </a> 
         </li> 

         <?php 

        } 
       echo '</ul>'; 

       } else { 
        echo 'sorry'; 
       } 
      } else { 
       echo 'sorry'; 
      } 
     } else { 
      echo 'There should be no direct access to this script!'; 
     } 

?>

CSS代碼：

#result { 
    height:20px; 
    font-size:16px; 
    font-family:Arial, Helvetica, sans-serif; 
    color:#333; 
    padding:5px; 
    margin-bottom:10px; 
    background-color:#FFFF99; 
} 
#country{ 
    padding:3px; 
    border:1px #CCC solid; 
    font-size:17px; 
} 
.suggestionsBox { 
    position: absolute; 
    left: 440px; 
    top:35px; 
    margin: 0px 0px 0px 0px; 
    width: 570px; 
    padding:0px; 
    background-color: #71a4e3; 
    border-top: 0px solid #000; 
    color: #ffffff; 
} 
.suggestionList { 
    margin: 0px; 
    padding: 0px; 
} 
.suggestionList ul li { 
    list-style:none; 
    margin: 0px; 
    padding: 6px; 
    border-bottom:3px solid #000; 
    cursor: pointer; 
    min-height:50px; 
} 
.suggestionList ul li:hover { 
    background-color: #ffffff; 
    color:#000; 
} 
.suggestionList a 
{ 
    background-color: #ffffff; 
    color:#000; 

} 
ul { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 
    color:#fffff; 
    padding:0; 
    margin:0; 
} 

.load{ 
background-image:url(../img/ajaxLoader/loader01.gif); 
background-position:right; 
background-repeat:no-repeat; 
} 

#suggest { 
    position:relative; 
}

來源

2013-04-07 Daman Mokha

問題解決。這是css zindex解決它 – 2013-04-07 20:54:37

給你的主要內容合作ntainer a position:relative和z-index:1 ...然後，將您的建議框設爲z-index:100或更高。這應該把你的建議高於頁面上的其他內容......如果我正確理解你的需求。

來源

2013-04-07 20:54:59 fletch

jQuery與我的其他元素在頁

回答

相關問題