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;
}

我已经读到绝对定位就是这样，但我需要折叠和扩展版本是绝对的，以便它们彼此重叠。无论如何我能做到这一点，以便教练广告推动Ron Swanson的形象而不是覆盖它吗？

Answer 1

我不知道很多简单的javascript，所以如果你不介意的话，我就把它更改为jQuery

我所做的就是获取图像高度并点击#toggle/#toggle2为它们设置动画效果 CODEPEN

Answer 2

以下是完整的解决方案：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？

2 个答案: