相对位置div内的绝对位置div移动

-1

CSS并不完全是我的强项，但我在Wikia上拼凑了一个图像堆叠模板，以帮助减少“几乎相同”文件的数量涉及手机游戏。相对位置div内的绝对位置div移动

本质上，我的混乱推动一堆图像到绝对定位的div，每个div都进入一个相对定位的div。父级具有宽度和高度设置，并且子级水平对齐。

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

父级设置为宽度/高度为52/53px，所以我不希望它改变形状。所有顶部：0px对齐的图像与父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梅辛多一些，我看到什么引发的异常行为，但我仍然不知道为什么或如何解决它。

如链接代码所示，每个图像都放置在一个锚点内。没有围绕他们的锚，他们正常工作。 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>

来源

2017-03-03 Bomb Bloke

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

默认情况下，图像与文本的中心对齐。尽管我的绝对定位div中没有文本，但显然锚点标签（）的存在数量很大，显然这些锚点可能会根据窗口大小更改位置（即使它们全部包含单个图像，但无法更改大小...）。

解决方案是将图像本身顶部对齐，这可能会覆盖锚点上发生的任何事情。我不会假装明白为什么这是必要的，但它有效。

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

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

来源

2017-03-04 06:04:13

相对位置div内的绝对位置div移动

回答

相关问题