2009-06-17 9 views
0

J'essaie de positionner une petite petite boîte de recherche en utilisant CSS avec une valeur supérieure négative, mais quand je fais cela, vous ne pouvez plus cliquer dans la zone de saisie ou cliquer sur le bouton. Vous pouvez encore tabuler sur le formulaire et la fonctionnalité fonctionne toujours. J'ai essayé de positionner le formulaire lui-même, en plaçant la forme dans un div et en le positionnant, en positionnant un div à l'intérieur du formulaire et aucun ne semble fonctionner.forme html et valeurs css supérieures négatives

Y at-il un moyen de déplacer ce bit de HTML d'environ 50px sans le casser?

<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> 
+0

Veuillez joindre le code CSS de searchBox. – Freddy

+0

Pour le débogage de ces problèmes, je définis chaque élément pour qu'il ait une couleur de fond différente, de sorte que l'élément auquel il appartient soit totalement évident. Utilisez des couleurs vives désagréables afin de ne pas oublier de les enlever plus tard. – edeverett

Répondre

2

définir l'index z CSS un peu plus haut (comme la forme # myForm {z-index: 10;}). Il va sous l'élément ci-dessus.

+0

Yup, j'ai déjà rencontré ce problème plusieurs fois. –

+0

Oui, c'est le problème. Je me suis rendu compte qu'en raison de la disposition du site, il se chevauchait par l'élément au-dessus, mais il sera difficile de résoudre ce problème parce que j'ai deux divs qui sont frères et soeurs et le premier doit chevaucher le second. La boîte de recherche est un enfant de la seconde div mais doit maintenant chevaucher la première. Je ne suis pas sûr s'il y a un moyen facile de le faire. Voici un simple croquis du site: http://kimag.es/share/29821158.gif –

0

Un autre élément de la page interfère avec votre zone de recherche en raison de son emplacement; pas simplement parce que vous avez une valeur supérieure négative en CSS.

Vous pouvez déplacer la zone de recherche de 50px en réduisant la valeur supérieure de 50px supplémentaires.

Pour remédier aux interférences, essayez d'abaisser les autres éléments de la page en ajoutant 50px à leurs valeurs supérieures.

0

Votre problème est-il dans IE ou dans tous les navigateurs? Si c'est dans IE seulement, essayez de définir la position: relative sur le formulaire (ou autre déclencheur hasLayout).

Méfiez-vous également des problèmes d'index z comme le dit SpliFF.

0

Ah, le z-index. Vraiment puissant, mais tellement mal compris. Jetez un oeil et les tutoriels W3 sur z-index, qui devrait vous aider avec ce problème.