div à l'intérieur positionné à l'intérieur des positions div

Question

CSS n'est pas exactement mon point fort, mais j'ai combiné un template d'empilage d'images sur Wikia pour aider à réduire le nombre de fichiers "presque identiques" relatif à un jeu mobile. Essentiellement, mon désordre enfonce un tas d'images dans des divs positionnés en absolu, chacun d'entre eux étant placé dans un seul div positionné relatif. Le parent a une largeur et une hauteur définies, et les enfants s'alignent correctement horizontalement.

Cependant, toutes les divs enfants qui ne sont pas définies en haut: 0px ne s'alignent pas comme je le souhaite. (Ce sont surtout des éléments qui rendent devant les personnages du jeu, tels que les chiffres.) Si je spécifie top: 37px je peux finir avec les images voyous allant à 40px ou 35px ... changer la taille du conteneur de la div parent semble pour dicter le positionnement exact (qui n'est pas spécifique au navigateur - testé IE et Firefox avec les mêmes résultats): cela peut être fait en redimensionnant la fenêtre horizontalement. en bas: 0px ne s'aligne pas non plus avec l'endroit où je m'attendrais à ce que le bas de la div parente soit; il semble varier de la même manière.

Le parent est défini pour avoir une largeur/hauteur de 52/53px, donc je ne m'attendrais pas à ce qu'il change de forme. Tout en haut: les images alignées 0px ont les mêmes dimensions que la div parente. Les autres images ont des dimensions variables, mais elles devraient toutes aussi s'inscrire dans le parent.

Pourquoi les enfants bougent-ils et comment puis-je atteindre le comportement attendu? Je crains que le karma de lien m'empêche d'incorporer directement toutes les URL pertinentes; Je les ai placés dans this paste à la place, avec ce que je crois être les extraits de code pertinents.

Mais, en bref:

<div style="position: relative; width: 52px; height: 53px; padding: 0; display:inline-block; vertical-align: middle;"> 
    <div style="position: absolute; left: 0px; top: 0px; padding: 0;"> 
     <!– img here goes in the top left –> 
    </div> 
    <div style="position: absolute; left: 0px; top: 40px; padding: 0;"> 
     <!– img here does NOT go 40px from the top of the relative positioned div –> 
    </div> 
</div> 

Edit:

Messing avec le code HTML un peu plus, je vois ce qui est le déclenchement du comportement étrange, mais je ne suis toujours pas sûr pourquoi ou comment le résoudre. Comme vu dans le code lié, chaque image est placée dans une ancre. Sans les ancres enroulées autour d'eux, ils fonctionnent correctement. Catch est je ne sais pas comment je pourrais enlever les ancres même si je le voulais, ce que je ne fais pas.

<div style="position: relative; width: 52px; height: 53px; padding: 0; display:inline-block; vertical-align: middle;"> 
    <div style="position: absolute; left: 39px; top: 34px; padding: 0;"> 
     <a href="somewhere"> 
      <img> <!– img here moves based on window size –> 
     </a> 
    </div> 
    <div style="position: absolute; left: 30px; top: 34px; padding: 0;"> 
     <img> <!– img here positions correctly –> 
    </div> 
</div> 

Answer 1

Les divs sont positionnés correctement, mais pas les images qu'ils contiennent.

Par défaut, les images sont alignées sur le centre du texte. Même s'il n'y a pas de texte dans mes divs positionnés en absolu, apparemment la présence de balises anchor() compte, et apparemment ces ancres peuvent changer de position en fonction de la taille de la fenêtre (même si elles ne contiennent que des images individuelles ...).

La solution a consisté à aligner les images elles-mêmes, ce qui annule vraisemblablement tout ce qui se passe avec les ancres. Je ne prétendrai pas comprendre pourquoi cela est nécessaire, mais cela fonctionne.

[[Image:someImage.png|link=someTarget|top|someToolTip]] 

<img src="someFile.png" style="vertical-align: top">