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;。

Answer 2

我们有一个great example of this issue - jsfiddle

您需要将该图片上的position设置为relative。虽然有些设计师可能会更好地解释它。

当位置：绝对时，图像消失

2 个答案: