stacking divs while pushing content down upon expanding an image?

Question

I'm working on this banner ad that I posted here yesterday and I got my images fading properly, but I had everything positioned in an absolute manner, and I need to have it so that when my ad expands, it pushes whatever content below it down. Right now, when I press expand, it covers the image below it, rather than push it down even though the picture's positioning is relative. Here's a link to my project on codepen.

And here's my CSS:

#banner{
position: relative;
min-height: 100px;
}
.hide {
  transition: opacity .5s ease-in-out;
  opacity: 0;
  position:absolute;

}

.show {
  transition: opacity .5s ease-in-out;
  opacity: 1;
  position: absolute;
  z-index: 1;
}
#toggle, #toggle2{
    cursor: pointer; 
}
#toggle{
margin-left:-123px;
}
#toggle2{
    position: relative;
}
#twitterIcon{
position: relative;

}
.videoDiv > video {
    display:inline-block;
    border: 1px solid;
    font-size:0;
    margin: 0;
    padding:0;
}
.videoDiv{
    font-size:0;
    margin-left:413px;
    padding-top:152px;
}

I've read that absolute positioning makes it this way, but I need the collapsed and expanded version to be absolute so that they're on top of one another. Is there anyway I can make it so that the Coach ad pushes the image of Ron Swanson down rather than covering it?

Answer 1

Here is a complete solution: http://codepen.io/anon/pen/mewMEO

The solution is to make the smaller banner absolute with a negative z-index so it is in fact behind the normally positioned large banner.

Also, I took the liberty of improving your JS code by making it more generic and adding support for multiple banners on the page.

HTML

<div class="banner collapsed">
  <img class="preview-size" src="http://i.imgur.com/y6foj3Z.jpg"/>
  <img class="full-size" src="http://i.imgur.com/CeUfSAX.jpg"/>

  <div class="btn-expand">
    <img id="toggle" src="http://i.imgur.com/axmdldH.png" />
  </div>

  <div class="btn-collapse">
    <img src="http://i.imgur.com/5wZwdGz.png" />
    <a href="https://twitter.com/intent/tweet?text=I%20LOVE%20the%20new%20%40coach%20swagger!">
      <img id="twitterIcon" src="http://i.imgur.com/WxSsDpb.png" />
    </a>
  </div>
</div>

<div class="push">
  <img src="http://i.imgur.com/sFNERNs.jpg" />
</div>

CSS

.banner {
  position: relative;
  width: 970px;
}

.banner img {
  /* Get rid of that margin on the bottom of the images */
  display: block; 
}

.banner .btn-collapse img {
  display: inline;
}

.banner .btn-expand {
  position: absolute;
  bottom: 0;
  right: 0;
}

.banner .preview-size {
  z-index: -1;
  position: absolute;
}

.banner .btn-expand {
  display: none;
}

.banner.collapsed .preview-size {
  z-index: 0;
  position: relative;
}

.banner.collapsed .preview-size,
.banner.collapsed .btn-expand {
  display: block;
}

.banner.collapsed .full-size,
.banner.collapsed .btn-collapse {
  display: none;
}

JS

(function() {
  var bannerEls = document.getElementsByClassName('banner');

  // Support multiple banners
  for (var index = 0; index < bannerEls.length; index++) {
    var currBannerEl = bannerEls[index];

    var expandEl = currBannerEl.getElementsByClassName('btn-expand')[0];
    var collapseEl = currBannerEl.getElementsByClassName('btn-collapse')[0];

    registerBannerToggle(expandEl, currBannerEl);
    registerBannerToggle(collapseEl, currBannerEl);
  }

  function registerBannerToggle(clickableEl, bannerEl) {
    clickableEl.addEventListener('click', function(e) {
      toggleCollapseState(bannerEl);
    });
  }

  function toggleCollapseState(bannerEl) {
    if (bannerEl.className.indexOf('collapsed') !== -1) {
      bannerEl.className =
        bannerEl.className.replace(/collapsed/g, '');
    }
    else {
      bannerEl.className += ' collapsed';
    }
  }
})();