How to enable an auto-suggest form field appear over the top of a table?

Experts,

I am using a jquery script which auto-suggests last names from my database when a user enters a few letters into the form field.  This auto suggest field sits above a table of information on my page.  I want the suggestions generated from this input field to show on top of the table.

What is happening now is that when I type something into my form field, I get the auto-suggestions but, it pushes the table lower on the page.  Instead of pushing the table lower, I want the suggestions to lay on top of the table.

Can anyone help?

I've tried various configs with z-index and position but, I can't figure it out.


//THIS IS THE CSS THAT GOVERNS THE SUGGESTION BOX

@charset "utf-8";
.suggestionsBox {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #212427;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
	}
	
	.suggestionList {
		margin: 0px;
		padding: 0px;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}




//HERE IS MY CODE WHICH GENERATES THE AUTO SUGGEST MENU WHEN A USER TYPES IN A FEW LETTERS, IT WORKS FINE

echo'<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
<div class="suggestionsBox" id="suggestions" style="display:none; position:static; z-index:100;">
<img src="../images/upArrow.png" style="position: static; top: -12px; left: 10px; z-index:1000;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>';


//THIS IS AN EXAMPLE OF A TABLE THAT I AM USING
echo'<table style="position:static; z-index:100;">';
echo'<tr><td></td></tr>';
echo'</table>';

//I NEED HELP WITH THE CSS SO THAT THE AUTO MENU DOES NOT PUSH THE TABLE LOWER ON THE PAGE

Open in new window

evibesmusicAsked:
Who is Participating?
 
RartemassConnect With a Mentor Author, martial arts coach, IT ConsultantCommented:
Z index should resolve this.
For a start z-index ONLY works on positioned elements. The three options for the position attribute are:
absolute, relative, and fixed.
You have position:static; in your code, which isn't a valid option.
Change those to position: fixed; and then apply the z-index to those elements.

The z-index with a high number will be positioned above any lower number.
Here are the details of the attribute:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
0
 
EyalCommented:
can you give us a working site that shows the problem?
0
 
evibesmusicAuthor Commented:
@Eval:

I can't but here are two screen shots...

The first shot shows how the table sits when the auto suggest field is not enabled:

Shot one

Shot two
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
evibesmusicAuthor Commented:
@All:

I apologize but, I can't have a static positioning of the table element because the table is dynamically generated with records.
0
 
RartemassConnect With a Mentor Author, martial arts coach, IT ConsultantCommented:
Then change the table element to have the position: relative; attribute.
Without a position attribute, you can't use z-index, which is designed for this kind of thing.
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
This article may help you with understanding positioning and what type to set on the table:
http://www.w3schools.com/css/css_positioning.asp
0
 
evibesmusicAuthor Commented:
@Rartemass:

Thank you.  Your suggestions worked. Dynamic table element now has the 'relative' attribute, suggestions element uses the 'static' attribute.  Work.

Cheers.
0
 
evibesmusicAuthor Commented:
Thanks.
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
Good to hear its all working.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.