MG1 MG1 - 29 days ago 25
CSS Question

Image disappears when position: absolute

I am trying to style the images inside the

li
's to always stick to the bottom of the div. But, when I apply
position: absolute
to the images, they disappear. What's the fix for this?

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

Here's a quick fiddle. I wasn't sure on how the images were supposed to be styled, but in this example you can see them, even if they are set to position: absolute;.