Question

CSS并不是我的强项，但我已经在Wikia上整合了一个图像堆叠模板，以帮助减少与手机游戏相关的“非常接近”的文件数量。

基本上我的混乱将一堆图像推入绝对定位的div中，每个div都进入一个相对定位的div。父级设置了宽度和高度，子级水平对齐。

但是，任何未设置为top的子div：0px都没有像我预期的那样对齐。（这些主要是在游戏角色前面呈现的元素，例如数字。）如果我指定顶部：37px我可能最终得到40px或35px的流氓图像...改变父div的容器的大小似乎决定确切的定位（这不是浏览器特定的 - 测试的IE和Firefox具有相同的结果）：这可以通过水平调整窗口大小来完成。 bottom：0px也没有对齐到我期望父div底部的位置;它似乎以同样的方式变化。

父级设置为宽度/高度为52 / 53px，因此我不希望它改变形状。全部顶部：0px对齐的图像具有与父div相同的尺寸。其他图像具有可变尺寸，但也应该都适合父母。

为什么孩子会移动，我如何实现预期的行为？

我担心链接业力会阻止我直接嵌入所有相关网址;我已将它们放入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混淆了一些，我看到是什么触发奇怪的行为，虽然我仍然不确定为什么或如何解决它。

如链接代码所示，每个图像都放在一个锚中。如果锚没有缠绕它们，它们就能正常工作。 Catch是我不知道如果我愿意的话我会如何移除锚，我不知道。

<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

div正确定位，但其中的图像不是。

默认情况下，图像与文本中心对齐。即使我的绝对定位div中没有文本，显然锚点（）的存在也很重要，显然这些锚点可能会根据窗口大小改变位置（即使它们包含的每个都是单个图像，可以＆＃39; t改变大小...）。

解决方案一直是对图像进行顶部对齐，这可能会超越锚点所发生的任何事情。我不会假装理解为什么这是必要的，但它确实有效。

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

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

相对定位div中的绝对定位div移动

1 个答案: