相對位置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移動

回答

相關問題