CSSは私の強みではありませんが、Wikiaのイメージスタッキングテンプレートを一緒にkludgedして、「ほぼ同じ」ファイルの数を減らしていますモバイルゲームに関する。絶対配置div内相対配置div移動
本質的に私の混乱は絶対位置のdivに画像の束を押し込みます。それぞれのdivは単一の相対配置divになります。親は幅と高さが設定され、子は正しく水平に整列します。
ただし、トップに設定されていない子供用のdiv：0pxは、期待どおりに整列しません。 （これは主にゲームの文字の前にレンダリングされる要素のようなものです）top：37pxを指定すると、40pxまたは35pxの不正な画像になることがあります...親divのコンテナのサイズを変更するようです正確な位置を指定することができます（これはブラウザー固有のものではありません - IEとFirefoxのテスト結果が同じです）。これはウィンドウを水平にリサイズすることで可能です。 bottom：0pxは、親divの下端があると予想される場所にも配置されません。それは同じように変化するようです。
親の幅/高さが52/53pxに設定されているため、形状が変更されることはありません。すべての上部：0ピクセルの位置合わせされた画像は、親divと同じ寸法です。他の画像は寸法が可変ですが、すべて親にも適合している必要があります。
なぜ子供たちは移動し、どのように期待された行動を達成するのですか？
私は恐れがあります。リンクカルマは関連するすべてのURLを直接埋め込むことを妨げます。代わりにthis pasteに配置し、関連するコードスニペットと考えています。
<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>
編集：簡単で
しかし、私はまだわからないものの、いくつかのより多くのHTMLをいじりは、私は、奇妙な行動をトリガー何見る理由または解決方法
リンクコードに見られるように、各画像はアンカー内に配置されます。それらの周りに包まれたアンカーがなければ、それらは正しく機能します。私が望んでいたとしてもアンカーをどうやって取り除くのかは分かりませんが、私はそうしません。
<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>