javascript - javascript/cssカバーインラインブロック

Question

Webページの上部にcssdisplay：inline-block属性を使用してスタイル設定されたテキストがあります。この属性を使用したのは、必要なレイアウト目標を達成するためです。（実際のコードは以下よりも少し複雑で、ブロック要素によって正しく表示できます。）

ただし、下のページをカバーすることになっているドロップダウンメニューにjavascriptとcssを追加しました。透けて見える上記のインラインブロック要素を除いて、下のページをカバーしています。

誰もがこの要素をカバーする方法を提案できますか？

これが私が現在持っているコードです。

ヘッダーのjavascriptとcss

<style type="text/css">
    #results {display: block;
        padding: 4px;
        position:absolute;
        text-align:left;
        border-top-style:none; 
        background-color:white;
        opacity:1.0;
        filter:alpha(opacity=100); 
    }
    .username {
        position:relative;
        display: inline-block;
    }
</style>

function search() {
    //retrieve input from webpage
    document.getElementById("results").innerHTML=xmlhttp.responseText; //populate results div
    //ajax to get resposetext from serve
}

html

<table>
    <tr>
        <td>
            <input type="text" onkeyup="searh(this.value)">
            <div id="results" style="position:absolute"></div>
            <div class="username">Username</div>
        </td>
    </tr>
</table>

Answer 1

z-index次のように、ドロップダウンを高い値に設定してみてください9999