Discussion :

[maniaco_jazz]

Bonjour,

Je voudrais superposé 2 images l'une sur l'autre.

Déjà, est-ce que c'est possible, et si oui, quel est la méthode ? J'ai regardé avec la propriété CSS z-index, mais je n'arrive pas trop...

en gros en code, je cherche à faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div>
    <img src="image1.png"><img src="image2.png">
</div>

Je voudrais donc que "image1.png" soit en dessous de "image2.png".
Je ne vois pas comment faire mis à part avec z-index ; sachant que je n'utilise pas de "position:absolute"... Et que j'ai déjà un background...

Merci de votre aide.

[MasterOfChakhaL]

Quand tu utilises position absolute, l'origine des coordonnées est définie par rapport au dernier ancêtre positionné.

S'il n'y a pas d'éléments positionnés , alors, l'origine est définie par rapport à la fenêtre du navigateur...

Essaye cela:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="multicouche" >
  <img id="couche1" src="image1.png" />
  <img id="couche2" src="image2.png" />
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#multicouche {
  position: relative; /*l'élément est positionné mais il se place tout seul*/
}
#multicouche img {
  position: absolute;
  top: 0;
  left: 0;
}
 
#couche1 {
  z-index: 1;
}
 
#couche2 {
  z-index: 2;
}

[maniaco_jazz]

Ca marche en effet. Je ne savais pas qu'on pouvait mettre un obsolute dans un relative (j'avais jamais essayé).

Merci !