CODEWITHSUNDEEP
jquerycss
kritya
kritya

Reputation: 3362

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 />
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.

Upvotes: 2

Views: 4939

Answers (4)

Ashutosh Raj
Ashutosh Raj

Reputation: 1055

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/`

Upvotes: 0

No Results Found
No Results Found

Reputation: 102794

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/

Upvotes: 3

Pratik
Pratik

Reputation: 30855

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 />

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

Just remove the

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

in your script and add a

<br />

after the input.

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

Upvotes: 0

Related Questions