html form and negative top css values

Question

I'm trying to position a small little search box form using CSS with a negative top value but when I do this you can no longer click in the text input box or click the button. You can still tab to the form and functionality still works. I've tried positioning the form itself, putting the form in a div and positioning that, positioning a div inside the form and none seem to work.

Is there any way I can move this bit of HTML up about 50px without breaking it?

<form action="search.html" method="post">
<div class="searchBox" id="generalSearch">
<input type="submit" class="fbutton" style="font-size:12px;" value="" />
<input type="text" style="tsearch" name="searchString" maxlength="200" size="24" value="" />
</div>
</form>

Answer 1

Some other element on the page is interfering with your searchbox due to where it is positioned; not simply because you have a negative top value in CSS.

You can move the searchbox up 50px by reducing the top value by another 50px.

To remedy the interference, try lowering the other elements on the page by adding 50px to their top values.

Answer 2

set the CSS z-index a bit higher (like form#myForm {z-index:10;}). It's going under the element above.

Answer 3

Is your problem in IE or all browsers? If it's in IE only, try setting position:relative on the form (or other hasLayout trigger).

Also beware of z-index issues as SpliFF says.

Answer 4

Ah, the z-index. Truly powerful, but so misunderstood. Take a look and the W3 tutorials on z-index, that should help you with this issue.