如何使用CSS？</div>滚动<div>中的一个图层两个对齐的图像

Question

我想在滚动＆lt; div＆gt; 中对两个对齐的图像进行分层。

起初我试过了：

<div style="width:300; height:300; overflow:scroll;">
    <img src="bottom.jpg"
         style="width:400; height:800">                                                                                                                                               
    <img src="top.png"
         style="width:400; height:800; position:absolute; top:0; left:0;">                                                                                                                                              
</div>

（这是一个简化的例子 - 实际网站有一个单独的CSS表等。）

我希望两个图像在＆lt; div＆gt;时表现为一个滚动，但第二个图像的“绝对”定位导致它不会滚动并且跳到＆lt; div＆gt;的边界。

我也尝试将第二张图片的样式更改为：

    <img src="top.png"
         style="width:400; height:800; position:relative; top:-800; left:0;">                                                                                                                                              

但是我的＆lt; div＆gt;底部有 800px的额外空格。

我是否可以在第二张图片上使用任何CSS 将其对齐在第一张图片的顶部并仍然允许它们一起滚动？

[更新] 工作解决方案位于ozake.com

Answer 1

您只需将position: relative添加到父级（div）即可。如果您在position:absolute的父集中不包含该元素，则使用relative时，它将包含在body中。所发生的事情是top.jpg正在骂它的父div，但bottom.jpg仍在body。一旦您将它们都包含在父级内，那么您可以将第二个图像设置为top: 800px以将其对齐到另一个图像的正下方

<div style="width:300; height:300; overflow:scroll; position: relative;">
   <img src="top.jpg" style="width:400; height:800"/>                                                                                                                                               
   <img src="bottom.jpg" style="width:400; height:800;position:absolute; top:800px; left:0;"/>                                                                                                                                              
</div>

FIDDLE

Answer 2

你想要这个：Jsfiddle

如果是这样，请转到：

<div style="width:300px; height:300px; overflow:scroll;">
    <div id="container" style="position: relative">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg/785px-Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg" style="width:400px;">
        <img src="http://pixabay.com/static/uploads/photo/2014/04/02/17/07/hat-308003_640.png" style="width:250px; position:absolute; top:75px; left: 125px;">
    </div>
</div>

使用您的风格中的某些单位，例如像素。 如果您使用position absolute设置样式元素，它将相对于文档本身定位，因此您应将position: relative设置为父元素，以将绝对定位的元素绑定到此父元素，而不是整个文档。在我们的例子中，我们使用position: relative为我们的图像创建了一个容器。 所以我们在#container div中滚动overflow:scroll，我们的图像相对于此容器对齐。