Mettre 2 images l'une sur l'autre
Je suis en train de faire un Cluedo-esque de style de site web où les gens peuvent soupçonner les gens ou de les déclarer innocent.
Quand j'ai personne est innocente, je veux mettre une croix rouge sur leurs photos.
Mais actuellement je suis aux prises de position de tout.
J'ai réussi à mettre 2 images l'une sur l'autre, mais pas sur la bonne position.
Situation actuelle: Une table avec des images dans la première rangée.
C'est le CSS ajoutée pour les photos:
<td><img src="bottom.jpg" style="z-index: 0; position: absolute" />
<img src="top.png" style="z-index: 1; position: absolute"/>
</td>
Comment la position de deux de mes images?
Retrait de la "position: absolute" ne fonctionne pas, donc comment je peux résoudre ce problème et de toujours garder les deux photos dans la cellule du tableau.
La solution devrait fonctionner pour toutes les photos dans la table (un général de la classe CSS pour les images (en haut/en bas).
Merci!
MODIFIER après Fabio suggestion
Il a résolu une partie du problème, mais pas entièrement.
C'est la situation actuelle avec le code exact que vous avez suggéré:
OriginalL'auteur Matt | 2014-08-19
Vous devez vous connecter pour publier un commentaire.
Vous devez envelopper les images supplémentaires
<div>
afin d'utiliser le positionnement relatif. Parce que l'effet deposition: relative;
sur table-cell éléments n'est pas défini.EXEMPLE ICI
Ensuite, vous pouvez simplement supprimer le
.top
image de document de circulation normale à un endroit que sur l'autre comme suit:CSS
PS: j'ai ajouté une transition de
opacity
propriété dans la démo en ligne pour masquer.top
images au survol de la souris.OriginalL'auteur Hashem Qolami
Tout d'abord supprimer vos styles en ligne. Si possible donner des cours à des images, comme ceci:
ensuite dans le CSS
L'OP est synonyme de Poster Original 🙂 Pas le message en lui-même.
Et
td{position:relative;}
n'a pas de sens; se Référer à ma réponse.Oups, my bad. Merci de me le dire 🙂
OriginalL'auteur Devin