title: Image disappears when position: absolute
body: <p>I am trying to style the images inside the <code>li</code>'s to always stick to the bottom of the div.  But, when I apply <code>position: absolute</code> to the images, they disappear. What's the fix for this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="carousel"&gt;
  &lt;li class="carousel-img"&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;img class="defaultImg" src="/design-engine-blue.jpg " style="display: inline-block;"&gt;
      &lt;img class="largeImg" src="5/design-engine.jpg" style="display: none;"&gt;
     &lt;div class="carousel-title"&gt;Design &amp; Engineering&lt;/div&gt;
  &lt;/li&gt;
  &lt;li class="carousel-img"&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;img class="defaultImg" src="/design-engine-blue.jpg " style="display: inline-block;"&gt;
      &lt;img class="largeImg" src="5/design-engine.jpg" style="display: none;"&gt;
     &lt;div class="carousel-title"&gt;Design &amp; Engineering&lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#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;
  }
  </code></pre>