如何在 HTML、CSS 和 JS 中疊加多個圖像？

Question

我已經閱讀了谷歌上關於如何疊加圖像的所有內容。 但它們都只是 2 個圖像。 我正在制作一個你可以捕捉生物的游戲，我在這里有我的游戲鏈接：

http://www.developlucca.com/FeatureQuest/app.html

游戲運行良好。 只是圖像只會使頁面更大更長。 頁面加載時只有一個人，等一下，生物會出現並使頁面滾動。 請幫忙！

Answer 1

如果父元素是 position:relative，你可以用 display:absolute 疊加圖像，

然后在這個父元素中，你可以繼續按 z-index 對圖像進行分層，z-index 將視圖優先於最高索引，就像圖層級別一樣。 這將允許您根據需要擁有盡可能多的圖像。 要處理大小，您可以使用 100% 寬度/高度，或者您可以使用覆蓋：隱藏。 我希望這有幫助。

Answer 2

您需要將這些圖像設置為position: absolute並將容器（ #main-content ）設置為position: relative 。

然后您可以通過top/left/right/bottom屬性設置每個圖像的位置。

更多關於 MDN 上的 CSS 定位：

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning