28172 sujets

CSS et mise en forme, CSS3

[Résolu] Une zone div qui flotte? comment faire ça?

Salut,

Voilà je vous montre une photo pour mieux connaitre le problème.

http://data.imagup.com/5/1116944863.png

Je veut que cette zone flotte sur la page HTML et non s'afficher dans le corps, comme les tooltips.



<div class="form-field clear" style="position:relative;">
  <label for="sous_categorie" class="form-label size-120 fl-space2">Sous catégorie: <span class="required">*</span></label>
  <input type="text" id="sous_categorie" class="required text fl-space2" autocomplete='off' name="sous_categorie"  onkeyup="lookup(this.value);" onblur="fill();"/></div><!-- /.form-field -->
    <div class="suggestionsBox" id="suggestions" style="display: none; "> 
      <img src="./images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
      <div class="suggestionList" id="autoSuggestionsList">
          &nbsp;
      </div>
  </div>   




<style>
	.suggestionsBox {
	
		position: relative;
		left: 115px;
		top: -5px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #CCC; /*#212427;*/
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #565656; /* #000;*/	
		color: #fff;
	}
</style>


Qui peut m'aider s'il vous plait?

Merci
Modifié par Keyser_Soze (11 Apr 2011 - 09:59)
Bonjour,

Il ne faut pas utiliser le positionnement relatif, mais le positionnement absolu.
En cherchant un peu tu trouveras quantité de tutoriels et articles qui en parlent.
Keyser_Soze a écrit :
Un problème surgit... lorsque la liste est affiché. On peut toujours voir les boutons radio qui sont dessous.

Essaye de donner un z-index:999; à ton div ?
(je dis 999 pour être sûr que le problème est relatif au z-index, finalement pas besoin de mettre une valeur aussi élevée)
Keyser_Soze a écrit :
Un problème surgit... lorsque la liste est affiché. On peut toujours voir les boutons radio qui sont dessous.

À ma connaissance c'est un problème (avec boutons radio, checkbox et avec les SELECT) dans IE6. Peut-être aussi dans IE7. (Si tu développes en testant en premier lieu dans IE7 ou IE6, tu as un problème de méthodologie à corriger. Smiley cligne ) Pas connaissance d'un problème similaire dans tous les navigateurs modernes.

Dans un navigateur non bugué, tu peux aussi avoir ce résultat si tes boutons radio sont positionnés en relatif avec un z-index supérieur à celui de ton bloc positionné en absolu.
À lire si ce n'est pas maitrisé: Comment fonctionne la propriété CSS z-index ?
Bonjour!

@ZeB_panam: Merci pour la réponse. Ça marche! Smiley cligne
Je ne connais pas cette propriété z-index... c'est très utile pour placer les éléments dans l'ordre!

@fvsch: Merci à vous aussi.
Le problème est avec google chrome! J'utilise toujours google chrome car c'est le meilleur navigateur à mon avis.
IE c'est un cauchemar pour les développeurs et les internautes Smiley lol

Bonne journée!
Sujet clos
Aller à