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

就像你在自动完成中得到div一样

好的，我现在看到了你想要的东西。

只需添加position:absolute;，并确保为其提供背景，以便其下方的内容无法显示。

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

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

Answer 2

只需删除

即可

$("#bottom-div").hide();

在您的脚本中

并添加

<br />

输入后。

http://jsfiddle.net/jasongennaro/fCAAY/6/

Answer 3

您可以将输入放入div中，如

<div><input type="text" /></div>
<div>you content</div>

或在输入标记<br />

之后添加

Answer 4

虽然这是一个非常古老的问题，可能无法帮助提问者，但也有其他人也在寻找相同的问题。

你需要得到输入的位置和高度 var pos = $（this）.position（）; var height1 = $（this）.outerHeight（）;

然后将div的css编辑到所需的位置并显示 $（＆＃34;＃菜单＆＃34）。CSS（{ 位置：＆＃34;绝对＆＃34;，顶部：（pos.top + height1）+＆＃34; px＆＃34;，左：（pos.left）+＆＃34; px＆＃34;， }）显示（）;

js fiddle link:`http://jsfiddle.net/m78u8805/`

jQuery css在元素下面放置一个div

4 个答案: