Faire chevaucher deux images transparentes en utilisant CSS

J'essaie de faire se chevaucher deux images transparentes (ayant la même taille/dimension) dans un div dans leur coin supérieur gauche. J'ai essayé:Faire chevaucher deux images transparentes en utilisant CSS

<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
<div style="margin:20px;"> 
<div id="main" style="overflow:hidden;background-color:red;width:400px;height:400px;border:3px solid blue;"> 
<img src="myimage1.png" style="position:relative;top:0px;left:0px;z-index:0;"/> 
<img src="myimage2.png" style="position:relative;top:0px;left:0px;z-index:10;"/> 
</div> 
</div> 
</body> 
</html>

Mais cela ne fonctionne pas. Au lieu de cela, les deux images sont concaténées dans le parent div.

Source

2010-04-04 Pierre

Essayez de faire #main pour position:relative, puis modifiez les deux <img> pour utiliser position:absolute.

Source

2010-04-04 16:13:49 kennytm

me devança - voici un exemple en direct http://jsbin.com/unogu3/ (I COMPENSATION les images pour montrer qu'ils se chevauchent - évidemment vôtre serait un peu différent) –

faire la deuxième image position:absolute et #main position:relative

Source

2010-04-04 16:14:50 carillonator

Juste une remarque:

position:relative et position:absolute se réfèrent à 0;0 de parent le plus proche, qui a position:relative ou position:absolute. Si aucun de vos div s n'a, alors il se réfère à 0;0 (en haut à gauche) du document (body).

position:relative - en haut et à gauche se référer à la différence entre la valeur d'écoulement naturel de l'élément - à savoir si « image » a écoulement naturel x 1500 et y 1200, top: 150px; left: -50px; se déplacer vers x: 1450; y: 1350;

position:absolute - en haut et gauche sont alignés contre 0;0 du plus proche p:r ou p:a élément parent, indépendamment du débit naturel - ex. (En pseudo html/css):

<div style="relative/absolute"> 
    <img absolute="top:-20px; left: 150px;"> 
</div>

image sera 20px supérieur et 150px à droite du coin supérieur gauche de la div parent. Cela dit, vous voulez que votre conteneur soit relatif et absolu et vos deux images empilées doivent être position:relative avec top: 0; left: 0;. Ne pas oublier de mettre z-index, si vous voulez avoir un meilleur contrôle sur la superposition.

-A

Source

2010-04-04 16:20:59

Faire chevaucher deux images transparentes en utilisant CSS

Répondre

Questions connexes