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 元素显示

HTML 中的可滚动堆叠图像

Scrollable Stacked Images in HTML

javascript

html

css

windows-store-apps