HTML-форма и отрицательные значения верхнего CSS

Question

Я пытаюсь расположить маленькую маленькую форму окна поиска с помощью CSS с отрицательным верхним значением, но когда я делаю это, вы больше не можете щелкать в поле ввода текста или нажимать кнопку.Вы все еще можете перейти на форму и функциональность по-прежнему работает.Я попытался позиционировать саму форму, поместить форму в div и расположить ее, поместив div внутри формы, и ни один из них, похоже, не работает.50px, не ломая его?

<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

установить CSS z-index немного выше (например, form # myForm {z-index: 10;}). Это будет под элементом выше.

Answer 2

Ах, z-индекс. Действительно мощный, но неправильно понятый. Взгляните на руководства W3 по z-index, которые помогут вам в этой проблеме.

Answer 3

Ваша проблема в IE или во всех браузерах? Если это только в IE, попробуйте установить положение: относительное в форме (или другой триггер hasLayout).

Также остерегайтесь проблем z-index, как говорит SpliFF.

Answer 4

Какой-то другой элемент на странице мешает вашему поисковому полю из-за его расположения; не просто потому, что у вас отрицательное верхнее значение в CSS.

Вы можете переместить окно поиска вверх на 50px, уменьшив верхнее значение еще на 50px.

Чтобы устранить помехи, попробуйте опустить остальные элементы на странице, добавив 50px к их верхним значениям.