html - 在扩展图像时向下推内容时堆叠 div？

Question

我正在处理我昨天在此处发布的横幅广告，我的图像正确淡出，但我的所有内容都以绝对方式定位，我需要这样当我的广告展开时，它会推送任何内容它下面的内容。现在，当我按下展开时，它覆盖了它下面的图像，而不是将它向下推，即使图片的定位是相对的。 Here's a link to my project on codepen.

这是我的 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;
}

我读过绝对定位是这样的，但我需要折叠和展开的版本是绝对的，这样它们才能相互重叠。无论如何，我是否可以让 Coach 广告将 Ron Swanson 的形象压低而不是覆盖它？

Answer 1

这是一个完整的解决方案:http://codepen.io/anon/pen/mewMEO

解决方案是使用负 z-index 使较小的横幅绝对化，这样它实际上位于通常定位的大横幅后面。

此外，我冒昧地改进了您的 JS 代码，使其更通用并在页面上添加了对多个横幅的支持。

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';
    }
  }
})();