在扩展图像时向下推内容时堆叠 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

您无法执行此操作的原因是有意阻止广告商扰乱网站的实际内容。要完成它，您必须保持相对位置以添加或使用 javascript.

操作“.push”div

Answer 2

我不太清楚 javascript 所以我把它改成 jQuery 如果你不介意的话

我所做的只是获取图像高度并通过单击 #toggle/#toggle2 为其设置动画 CODEPEN

Answer 3

这是一个完整的解决方案：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';
    }
  }
})();

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

stacking divs while pushing content down upon expanding an image?

html

css

expand

css-position