faire flotter l'objet sur une image en utilisant CSS?

Est-il possible de faire flotter un objet sur une image en utilisant css? Je veux placer un formulaire sur une image (ce n'est pas un arrière-plan). Float ne fonctionne pas, mais existe-t-il une variable qui fournit cette fonction?faire flotter l'objet sur une image en utilisant CSS?

Lorsque vous faites flotter un objet, il pousse le texte de chaque côté de l'objet. Ce que je cherche, c'est quelque chose qui ne fera pas ça, qui flottera simplement sans tenir compte de ce qui est en dessous.

Source

2010-11-30 user494216

Ce que vous cherchez ne sont pas les éléments flottants font. Un élément flottant fait toujours partie du flux de documents et vous voulez un élément qui ne l'est pas.

Utilisation de positionnement absolu pour prendre un élément hors du flux de documents, de cette façon, il ne poussera pas d'autres éléments loin et vous pouvez le placer sur 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 l'origine pour les éléments absolument positionnés à l'intérieur, de sorte que le texte est placé sur le dessus de l'image et non dans le coin supérieur gauche de la page.

Source

2010-11-30 19:21:42 Guffa

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

Si cela ne suffit pas à vos besoins, consultez http://w3schools.com/css/css_positioning.asp

Source

2010-11-30 19:08:48 DwB

Je ne peux pas en faire un arrière-plan parce que c'est un imagemap. Je vais jeter un coup d'oeil sur ce site, merci pour le lien. – user494216

@OP S'il s'agit d'un imagemap, n'a-t-il pas besoin d'être cliquable? Est-ce que le fait d'avoir quelque chose en plus sera un inconvénient à cet égard? – Orbling

Essayez 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>

Source

2010-11-30 19:14:17 yvoyer

faire flotter l'objet sur une image en utilisant CSS?

Répondre

Questions connexes