flotteur objet sur une image à l'aide de CSS?

Est-il possible de flotter un objet sur une image à l'aide de css? Je veux mettre un formulaire sur une image (qui n'est pas un arrière-plan). Flotteur ne fonctionne pas, mais est-il une variable qui fournit cette fonction?

Lorsque vous flotter un objet, qu'il pousse le texte de chaque côté de l'objet. Ce que je cherche, c'est quelque chose qui ne va pas faire ça, ça va juste flotter sans égard à ce qui est en dessous.

OriginalL'auteur user494216 | 2010-11-30

  1. 28

    Ce que vous cherchez n'est pas ce que les éléments flottants faire. Un élément flottant est encore une partie du flux de documents, et vous souhaitez qu'un élément qui n'est pas.

    Utiliser le positionnement absolu de prendre un élément du flux de documents, de cette façon il ne sera pas pousser les autres éléments de route et vous pourrez le placer sur le dessus d'autres éléments:

    <div style="position:relative">    
  <img src="image.jpg" alt="" />
  <div style="position:absolute;left:0;top:0;">
    This text is on top of the image
  </div>
</div>

    Les éléments avec position:relative actes comme origine pour les éléments en position absolue à l'intérieur, de sorte que le texte est placé sur le haut de l'image et non dans le coin supérieur gauche de la page.

    OriginalL'auteur Guffa

  2. 0

    Si vous faites de l'image en question l'image de fond de la div ou (oui, je dis que c') table utilisée pour le format de la forme, alors le formulaire de "flotter" sur l'image.

    Si ce n'est pas suffisant pour vos besoins, découvrez http://w3schools.com/css/css_positioning.asp

    Je ne peux pas en faire un fond, car c'est une image map. Je vais jeter un oeil à ce site, merci pour le lien.
    Si c'est une image map, n'est-il pas besoin d'être cliquable? Avoir quelque chose sur le dessus de lui être un inconvénient à cet égard?

    OriginalL'auteur DwB

  3. 0

    Essayer z-index propriété

    <html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

    OriginalL'auteur yvoyer