绝对定位图像下方的标题答案

【问题标题】：Caption Below Absolute Positioned Image绝对定位图像下方的标题
【发布时间】：2014-03-21 22:24:09
【问题描述】：

我正在通过提供图像位置来创建幻灯片库：绝对。问题是，我希望缩略图的标题和标题位于其下方，并且信息位于缩略图下方，而不是下方。

我正在使用高级自定义字段及其库字段插件。

<div id="slideshow_thumb">  


    <h4>view images</h4>

        <?php 
        $images = get_field('gallery'); 
        $image_1 = $images[0]; 
        ?>    
         <?php foreach( $images as $image ): ?>


        <a href="<?php echo $image['url']; ?>" rel="fancybox"><img src="<?php echo $image_1['url']; ?>" /></a>


        <?php endforeach; ?>

        <div id="slideshow_thumb_info">
        <?php echo $image_1['title']; ?><br>
        <?php echo $image_1['caption']; ?>
        </div>


</div>

CSS

#slideshow_thumb {
width:22%;
float:left;
margin-bottom:0;
padding-bottom:0;
margin-right:3%;
}

#slideshow_thumb img {
width:22%;
height:auto;
position:absolute;
}

#slideshow_thumb a:first-of-type img{
z-index:100;
}

【问题讨论】：

标签： css z-index absolute

【解决方案1】：

我通过隐藏除第一张图像之外的所有其他图像来解决它，而不是使用位置：绝对。

所以我的 CSS 现在是：

#slideshow_thumb {
width:22%;
float:left;
margin-bottom:0;
padding-bottom:0;
margin-right:3%;
}

#slideshow_thumb img {
display:none;
width:100%;
height:auto;
}

#slideshow_thumb a:first-of-type img{
display:block;
}

【讨论】：