Comment positionner une image sur une autre en HTML?

Question

Je suis un début rails programmeur, en essayant de montrer plusieurs images sur une page. Certaines images sont à poser sur le dessus des autres. Pour faire simple, disons que je veux un carré bleu avec un carré rouge dans le coin supérieur droit du carré bleu (mais pas trop dans le coin). Je suis en essayant d'éviter de composition (avec ImageMagick et similaires) en raison de la performance de questions.

Je veux juste position de chevauchement des images par rapport à une autre.

En tant que plus difficile exemple, imaginez un compteur kilométrique, placé à l'intérieur d'une image plus grande. Pour les six chiffres, j'aurais besoin de composite d'un million de différentes images, ou tout faire à la volée, où tout ce qui est nécessaire est de placer les six images sur le dessus de l'autre.

Answer 1

---

Answer 2

Ceci est un regard nu sur ce que j'ai fait pour faire flotter une image sur une autre.

 <style type="text/css"> 
.imgA1 { position:absolute; top: 25px; left: 25px; z-index: 1; } 
.imgB1 { position:absolute; top: 25px; left: 25px; z-index: 3; } 
</style>

<img class=imgA1 src="http://full.path.to/imageA.jpg">
<img class=imgB1 src="http://full.path.to/imageB.jpg">
 

La source

Answer 3

Voici le code qui peut vous donner des idées:

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

Je soupçonne que Espo de la solution peut être gênant, car il vous oblige à positionner les deux images absolument. Vous souhaitez peut-être le premier à se positionner dans le flux.

Habituellement, il est un moyen naturel de le faire est de CSS. Vous mettez en position: relative sur l'élément conteneur, et puis absolument position des enfants à l'intérieur. Malheureusement, vous ne pouvez pas mettre une image à l'intérieur de l'autre. C'est pourquoi j'ai besoin div conteneur. L'avis que j'en ai fait un flotteur pour le faire ajuster automatiquement à son contenu. Affichage: inline-block devrait théoriquement fonctionner aussi bien, mais l'appui de navigateur pauvres.

EDIT: j'ai supprimé les attributs de taille des images pour illustrer mon point de plus. Si vous souhaitez que le conteneur de l'image pour avoir ses tailles par défaut et que vous ne connaissez pas la taille à l'avance, vous ne pouvez pas utiliser le fond d'astuce. Si vous le faites, c'est une meilleure façon d'aller.

Answer 4

Un problème que j'ai remarqué qui pourrait causer des erreurs est que, dans la réponse de Rrichter, le code ci-dessous:

 <img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
 

devrait inclure les unités px dans le style, par exemple.

 <img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
 

En dehors de cela, la réponse a bien fonctionné. Merci.

Answer 5

Vous pouvez absolument positionner pseudo elements rapport à leur élément parent.

Cela vous donne deux couches supplémentaires avec lesquelles vous pouvez jouer pour chaque élément - il est donc facile de positionner une image sur une autre, avec un balisage minimal et sémantique (pas de div vide, etc.).

balisage:

 <div class="overlap"></div>
 

css:

 .overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}
 

Voici une démo en direct