jQuery css place a div just below an element
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 />
ContentCon开发者_Go百科tent 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.
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/
Just remove the
$("#bottom-div").hide();
in your script and add a
<br />
after the input.
http://jsfiddle.net/jasongennaro/fCAAY/6/
either you can put the input into the div like
<div><input type="text" /></div>
<div>you content</div>
or add after the input tag <br />
Though it is a very old question and might not help the questioner but others who are also searching for the same question.
you need to get the position and height of the input by var pos = $(this).position(); var height1 = $(this).outerHeight();
and then edit the css of the div to the desired position like this and show $("#menu").css({ position: "absolute", top: (pos.top + height1) + "px", left: (pos.left ) + "px", }).show();
js fiddle link:`http://jsfiddle.net/m78u8805/`
精彩评论