html - 位置: absolute时图像消失

Question

我正在尝试将 li 中的图像设置为始终贴在 div 的底部。但是，当我将 position: absolute 应用于图像时，它们消失了。有什么解决办法？

HTML

<ul id="carousel">
<li class="carousel-img">
    <div></div>
    <img class="defaultImg" src="/design-engine-blue.jpg " style="display: inline-block;">
    <img class="largeImg" src="5/design-engine.jpg" style="display: none;">
   <div class="carousel-title">Design & Engineering</div>
</li>
<li class="carousel-img">
    <div></div>
    <img class="defaultImg" src="/design-engine-blue.jpg " style="display: inline-block;">
    <img class="largeImg" src="5/design-engine.jpg" style="display: none;">
   <div class="carousel-title">Design & Engineering</div>
</li>
</ul>

CSS

#carousel {
    bottom: 0;
    color: #FFFFFF;
    left: 12.2%;
    list-style: none outside none;
    margin: 0 auto;
    max-width: 980px;
    overflow: auto;
    position: absolute;

}

#carousel li {
   float: left;
   height: 223px;
   line-height: 1.7em;
   position: relative;
}

#carousel li img {
    vertical-align: bottom;
    //position: absolute;
    //bottom: 0;
}

Answer 1

这是一个快速 fiddle .我不确定图像应该如何设置样式，但在此示例中您可以看到它们，即使它们设置为 position: absolute;。