Question

我正在尝试将所有较大的图像叠加在一起，并在其下方放置了这些图像。

我是这样做的：

#images img {
    position: absolute;
    top: 0px;
    left: 0px;
}

但问题是缩略图移动到页面顶部。如何将缩略图放在大图像下面并叠加大图像。

PS：我宁愿不使用margin-top

HTML：

<div id="gallery">
    <div id="images">
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+01" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+02" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+03" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+04" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+05" alt=""/>
    </div>

    <div id="thumbnails">
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+01" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+02" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+03" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+04" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+05" alt=""/></a>
    </div>
</div>

CSS：

#gallery {
    margin: 0 auto;
    width: 800px;
}
#thumbnails {
    margin: 10px auto 10px auto;
    text-align: center;
    width: 800px;
}
#images {
    width: 770px;
    float: left;
    position: relative;
    left: 0;
    top: 0;
}
#thumbnails img {
    width: 130px;
    height: 130px;
}
#images img {
    border: 4px solid #555;
    margin-top: 5px;
    width: 750px;
}
#thumbnails a:link, #thumbnails a:visited {
    width: 130px;
    height: 130px;
    border: 6px solid #555;
    margin: 6px;
    float: left;
}
#thumbnails a:hover {
    border: 6px solid #888;
}

JSFiddle Demo

Answer 1

当您使用浮点数，固定位置或绝对位置时，元素将从页面布局的静态流中移除，并且它不再有助于计算父元素的高度。当浮动是问题时，我们可以使用clearfix但是使用绝对定位你需要在容器上设置一个高度。

要解决这个问题在您的示例中，我们知道图像的大小，因此在添加了您希望用于堆叠图像的绝对定位后，我只是将height: 630px;添加到#images。

P.S。我还在#thumbnails的左右两侧添加了-5px边距，以对抗第一个和最后一个缩略图的外边距，使其与#images水平对齐。

#images img {
    position: absolute;
    top: 0px;
    left: 0px;
}

#gallery {
    margin: 0 auto;
    width: 800px;
}
#thumbnails {
    margin: 10px -5px;
    text-align: center;
    width: 800px;
}
#images {
    width: 770px;
    position: relative;
    height: 630px;
}
#thumbnails img {
    width: 130px;
    height: 130px;
}
#images img {
    border: 4px solid #555;
    margin-top: 5px;
    width: 750px;
}
#thumbnails a:link, #thumbnails a:visited {
    width: 130px;
    height: 130px;
    border: 6px solid #555;
    margin: 6px;
    float: left;
}
#thumbnails a:hover {
    border: 6px solid #888;
}

<div id="gallery">
    <div id="images">
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+01" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+02" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+03" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+04" alt=""/>
        <img src="http://dummyimage.com/360x300/000/fff.png&text=Image+05" alt=""/>
    </div>

    <div id="thumbnails">
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+01" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+02" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+03" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+04" alt=""/></a>
        <a href="#"><img src="http://dummyimage.com/360x300/000/fff.png&text=Image+05" alt=""/></a>
    </div>
</div>

Answer 2

您可以为screenSize div指定一些宽度和高度，然后为#images指定max-width和max-height至100％，并使其位置{{1} }。包含绝对imgs的div应该有一些高度。

像这样：

#images img

学习CSS定位的最佳资源之一是http://www.barelyfitz.com/screencast/html-training/css/positioning/

将图像堆叠在彼此的问题上

2 个答案: