如何使用HTML/CSS或JavaScript疊加多個圖像，而不使用position：absolute？

Question

我是一個Google愛好者，因此我在到達這裏之前已經非常徹底地獵殺過。也許我只是不注意，或者我的撇脂習慣回來咬我，但我不相信我已經找到答案了。

我見過類似問題的解決方案，但我不認爲它們中的任何一個適用於此。 我想在一個元素中疊加兩個相同大小的PNG;這本身很簡單，但上下文稍微複雜一些。我已經使用HTML/CSS很長時間了，現在我正在學習JavaScript;因此，我一直在製作HTML遊戲。這個遊戲涉及創建具有不同特徵的動物，並且我爲每個特徵繪製了PNG，並分別用透明背景保存它們。在這裏，以供參考，是一個例子：

基礎映像：

睫毛我想覆蓋的雌蛙：

我所熟悉的使用位置：絕對覆蓋圖像，但我不能給絕對的位置;這些生物會使用innerHTML自動顯示在彼此的div上，這會帶來兩個問題：一個，並不是每個生物都處於相同的絕對位置，有的只有在用戶向下滾動時纔會顯示出來。我也想過將背景圖像設置爲一個圖像，但是會出現需要疊加多達四個單獨圖像的情景，所以這是行不通的。我遇到了關於jQuery的一些神祕的可能性，但是由於我的學習還沒有那麼深入，如果有人能夠幫助我，我會非常感激。唯一的另一種選擇是手動覆蓋並保存每個可能的組合作爲圖像，這將需要幾百張圖像，所以我熱切地希望我可以不惜一切代價避開這條道路。

如果我只是愚蠢的解決方案已經在我考慮和丟棄的可能性之一，請讓我知道。

Answer 1

如果無法定位其絕對的，我認爲唯一的解決辦法是多背景（CSS3）：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

http://www.css3.info/preview/multiple-backgrounds/

當您需要添加或刪除特定的背景，問題就來...您需要特別創建的函數來添加背景並將其從圖層中移除。

順便說一句，我建議你嘗試將它們移到絕對位置，因爲它比使用多個背景更容易。

請記住，您可以在相對位置的div內使用position: absolute，因此absolute定位將相對於相對位置的定位。