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>

是否可以使用画布使图像堆叠和**滚动*？

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中的可滚动堆叠图像

1 个答案: