javascript - HTML 中的可滚动堆叠图像

Question

我正在尝试在页面中制作堆叠图像，但我需要带有图像的页面才能滚动，因此 position:fixed; 无法正常工作。

我试过了，但它使图像固定在屏幕上，而不是#content div。

<div id="content"><!--I made this scrollable in css-->
    <!--other content here-->
    <div id="imageStack">
        <img id="map" src="bg.png" style="position:fixed;x:0;y:0" /><!--this line and the next will be added in JS-->
        <img id="map" src="top.png" style="position:fixed;x:8;y:6" />
    </div>
    <!--other content here-->
</div>

是否可以在不使用 Canvas 的情况下使图像堆叠和**滚动*？

Answer 1

添加以下CSS

#imageStack {
    position: relative;
}

img {
    position: absolute;
}

img:nth-child(1) {
    top: 0;
    left: 0;
}

img:nth-child(2) {
    top: 6px;
    left: 8px;
}


.... etc

它们将相对于 imageStack 元素显示