如何使用HTML/CSS或JavaScript覆盖多个图像，而不使用position:absolute？

我是一个谷歌爱好者，因此在来到这里之前，我已经彻底地搜索过了。也许我只是注意力不集中，或者我的略读习惯又回来咬我了，但我不相信我已经找到了答案

我见过类似问题的解决方案，但我认为其中任何一个都不适用于这里。我想在一个元素中叠加两个大小相同的PNG；这本身很简单，但上下文稍微复杂一些。我已经使用HTML/CSS很长时间了，现在我正在学习JavaScript；因此，我一直在制作一个HTML游戏。这个游戏包括创建具有不同特征的动物，我为每个特征绘制了PNG，并用透明背景分别保存它们。以下是一个示例，供参考：

基本图像：

我想为雌性青蛙覆盖睫毛：

我熟悉使用位置：绝对覆盖图像，但我不能给出绝对位置；这些生物将使用innerHTML自动显示在一个div中，彼此并排显示，这带来了两个问题：一个问题是，并非每个生物都处于相同的绝对位置，另一个问题是，有些生物在用户向下滚动之前不可见。我也曾考虑过将背景图像设置为一幅图像，但在某些情况下，需要将最多四幅单独的图像叠加在一起，这样做是行不通的。关于jQuery，我遇到了一些神秘的可能性，但由于我在学习方面还没有走那么远，如果有人能帮助我，我将不胜感激。唯一的另一种选择是手动覆盖并将每个可能的组合保存为一个图像，这将需要数百个图像，因此我热切希望我能够不惜一切代价避免这种路径

---

如果我只是愚蠢，而解决方案已经在我考虑过并放弃的可能性中，请让我知道。

如果您不能将其定位为绝对，我认为唯一的解决方案是多背景（CSS3）：

当您需要添加或删除特定背景时会出现问题。。。您将需要专门创建的函数来添加背景并将其从层中移除

顺便说一句，我建议你尝试将它们移动到一个绝对位置，因为这比使用多个背景更容易

---

请记住，您可以在相对定位的div中使用

position:absolute

，因此

absolute

定位将与相对定位的div相对。

非常感谢。^这应该是非常有帮助的。假设我们可以或多或少地忽略IE（如果这是个例外），那么这个功能在所有现代浏览器中都能正常工作吗？这适用于所有现代浏览器，包括IE>10。PS：如果你喜欢这个答案，请接受它：）很抱歉继续打扰你，但我以前从未使用过CSS3；我试着把它直接写进我的风格，但没有成功。我需要做什么特别的事情吗？不，这很简单，只要用逗号把它们分开就行了。你可以检查你的浏览器是否兼容。嘿@user2870301如果你接受任何正确的答案，那就太好了。。。除息的