Question

I have 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();
});

I want the bottom-div below the input box, and should be above the content, i.e. no content should block it. How can I do this with CSS and jQuery?

EDIT: I want it to be like an autocomplete.

Answer 1

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

OK, I see what you want now.

Just add position:absolute; and make sure to give it a background so the content beneath it doesn’t show through.

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

Demo: http://jsfiddle.net/fCAAY/11/