将图像堆叠在一起问题答案

【问题标题】：Stacking images over each other issue将图像堆叠在一起问题
【发布时间】：2018-01-29 11:17:29
【问题描述】：

我正在尝试将所有较大的图像堆叠在一起，并在其下方放置缩略图。

我是这样做的：

#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

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

附：我还在#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>

【讨论】：

【解决方案2】：

您可以为#images div 分配一些宽度和高度，然后将max-width 和max-height 分配给#images img 的100% 并使其位置为absolute。包含绝对 imgs 的 div 应该有一些高度。

像这样：

#gallery {
    margin: 0 auto;
    width: 800px;
}

#images {
    width: 500px;
    height: 500px;
    position: relative;
}
#images img {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 100%;
    max-height: 100%;
}

#thumbnails {
    margin: 10px auto 10px auto;
    text-align: center;
    width: 800px;
}

#thumbnails img {
    width: 130px;
    height: 130px;
}

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

【讨论】：