jQuery css 将一个 div 放在一个元素的正下方

Question

我有this code :

#bottom-div {
    z-index:999
}

<input type="text" id="main" />
<div id="bottom-div">Div to be place below the input box</div>
ContentContent Conetent<br />
ContentContent Conetent<br />
ContentContent Conetent<br />

$("#bottom-div").hide()
    $("#main").click(function() {
   $("#bottom-div").toggle();
});

我想要输入框下方的 bottom-div，并且应该在内容上方，即没有内容应该阻挡它。我如何使用 CSS 和 jQuery 做到这一点？

编辑:我希望它像自动完成一样。

Answer 1

Like u got div's in auto-completes like that

好的，我现在明白你想要什么了。

只需添加 position:absolute; 并确保给它一个背景，这样它下面的内容就不会显示出来。

#bottom-div {
    z-index:999;
    position:absolute;
    background:#fff;
}

演示:http://jsfiddle.net/fCAAY/11/