List (li's) on top off eachother

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%;
  display: block;
  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>

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?

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.