Comment puis-je superposition d'images (png) au sein d'un site web?

Je suis en train de monter une image dans le milieu d'une autre (un peu plus) de l'image de sorte qu'il semble être dans la plus grande image (un téléphone dans ce cas). Je ne suis pas sûr de la bonne façon pour que cela se produise et toute aide est très appréciée!

OriginalL'auteur Taylor | 2011-09-02

  1. 10

    Vous devez définir la z-index propriété css.

    HTML:

    <img id="png1" src="png1.png" />
<img id="png2" src="png2.png" />

    CSS: 

    #png1 {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}

#png2 {
    position:absolute;
    /*
    set top and left here
    */
    z-index:1;
}

    Voici une démo: http://jsfiddle.net/AlienWebguy/6VSBv/

    Ah! Merci oh tellement, très simple! Séjour génial!
    Une autre petite question, désolé de mon ignorance, de l'o.O, mais si le positionnement de png1 est centrée via html, comme dans pas en haut à gauche comme il l'a été dans l'exemple fourni, comment puis-je définir le positionnement de png2 être par rapport à elle (je pense que c'est logique, sinon faites le moi savoir!) Merci oh tellement!
    Tant pis, je pense que j'ai tout compris sur ma solitude, je vous remercie beaucoup encore une fois! Et je vérifie l'avais! Meilleurs voeux!

    OriginalL'auteur AlienWebguy

  2. -1
    <img style="position:absolute;left:10px;top:10px;" src="img1.png">
<img style="position:absolute;left:20px;top:20px;" src="img2.png">

    Bien sûr, vous aurez besoin d'ajuster les coordonnées, et je vous recommande fortement de mettre le CSS dans une feuille de style au lieu de la ligne. Voici un très bon tutoriel sur le CSS pour plus d'informations: http://www.csstutorial.net/

    OriginalL'auteur someone

  3. -1

    Si vous êtes nouveau à html et CSS. C'est pas un problème, mais votre question est un peu vague pour C'est DONC le format général.

    Cependant, en un mot:

    <style>
    #phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;}
    #display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;}
</style>
<div id="phone">
    <div id="display">
        Hello! What is up? Miley rocks!
    </div>
</div>

    Live exemple: http://jsfiddle.net/cbn4L/

    Bien sûr, cela est extrêmement simple exemple. Et comme vous pouvez le voir sur le contenant intérieur n'est pas une image, un texte, mais.. Techniquement, vous pouvez y ajouter une image maintenant.. mais comme nous aident à vous dans le monde de l'HTML & CSS, alors c'est un meilleur exemple et peut-être peut améliorer votre concept 🙂

    Cela ne veut pas répondre à l'OP de la question à tous. Vous n'êtes pas la superposition de toutes les PNG ici.
    Anderson: Bien, l'OP est évidemment un débutant.. donc si l'image extérieure est un téléphone, puis mon exemple est probablement quelque chose de similaire à son but plus élevé. Donc, techniquement, c'est un plus de l'enseignement et de l'alternative la réponse-en essayant de comprendre ce que l'OP veut vraiment faire.

    OriginalL'auteur