Question

我使用以下代码显示了打字的建议。它工作得很好，但我的其他元素与我的搜索建议重叠。我该如何解决这个问题？

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

Answer 1

为您的主要内容容器添加position:relative和z-index:1 ...然后，将您的建议框设为z-index:100或更高。这应该将您的建议置于页面上的其他内容之上...如果我正确理解您的需求。

jQuery重叠了我在页面中的其他元素

1 个答案: