List (li's) on top off eachother

[donboe]

I have the following CSS:

#sidebar ul.banners {
  width: 91.32791327913279%;
  margin-right: 4.336043360433605%;
  padding: 0 !important;
  list-style: none;    
}

#sidebar ul.banners li {
  width: 100%;
  display: block;
  position: relative;    
}

#sidebar ul.banners li + li {
  margin-top: 1em;    
}

#sidebar ul.banners li img {
  max-width: 100%;
  height:auto;
  display: block;
  position:absolute;
  top: 0;
  left: 0;
  z-index: -1;    
}

and the following HTML

<aside id="sidebar">
  <ul class="banners">
    <li><img src="/../images/page_banners/location.jpg"></li>
    <li><img src="/../images/page_banners/offers.jpg"></li>
    <li><img src="/../images/page_banners/links.jpg"></li>
  </ul>
</aside>

For some banners in the sidebar, but the banners are displaying on top of eachother with the 1em top-margin from li + li.

What am I overseeing?

[RyanReese]

The images are all position:absolute; and as a result, the <li>'s have no content in them (the only thing in the <li>'s are the images, but since that’s absolute…the <li> sees no children). That means 0 height. Which means that the <li>'s are basically stacking on top of each other. Giving the <li> a height (e.g. 20px) will confirm this.

However, do not actually give this a height to solve the problem.

Why are the images absolute? What is the purpose of that? That is the root of your issue here.