css - CSS在div中定位两个图像

Question

我正在尝试以这种样式设置图像：一个在顶部，另一个在 this 下方。实际上我做错了什么，在我的结果图像中是一个在另一个之下。这是 jsFiddle。

第二张图片被课堂隐藏overflow:hidden。slider

问题：

我在哪里犯错？我确信有简单的解决方案，但我浪费了一些时间并且找不到它。

PS 如果有可能我正在寻找仅更改css的解决方案。

Answer 1

将图像的 css 更改为：

img{
    display:block;
}

这样就行了。

评论后编辑：

img{
    position: absolute;
    z-index: -1;
    top: 0px;
    left:0;    
}

这会将您的所有图像钉在左上角。

Answer 2

我想你的img必须

img
{
display:block; /*if you want top to bottom use display:inline;*/

}

Answer 3

我看到你已经标记了一个答案，但我已经输入了这个，所以你去吧:)

您也可以通过删除浮动来稍微简化您的 CSS，如果您只为滑块使用图像（图像旁边没有文本），您甚至可以通过删除整个.photodiv 来简化 HTML。

简化代码：

<div class="slider">
    <img src="http://lorempixel.com/754/453/" alt="Bottom Image" />
    <img src="http://placehold.it/754x453" alt="Top Image" />
</div>

.slider {
    overflow: hidden;
    position: absolute;
    top: 1px;
    left: 371px;
    width: 754px;
    height: 453px;
}
img{
    position: absolute;
    z-index: -1;
    top: 0px;
    left:0px;
}

http://jsfiddle.net/daCrosby/MP6qN/8/