找到你要的答案

Q:stacking divs while pushing content down upon expanding an image?

Q:同时推动内容div上堆叠扩展图像?

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?

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.

这是我的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的形象,而不是覆盖它?

answer1: 回答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';
    }
  }
})();

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

The reason you are not able to do this was intentional to deter advertisers from messing with the actual website content. To pull it off, you would have to keep the position relative for the add or manipulate the ".push" div using javascript.

你不能这样做的原因是故意阻止广告商在网站的实际内容。把它关闭,你将不得不保持位置添加或操纵”相对。推“div使用JavaScript。

answer3: 回答3:

I dont know much plain javascript so I changed it for jQuery if you don't mind

All I've done was get images height and set animate on them with click on #toggle/#toggle2 CODEPEN

我不知道很多普通的JavaScript所以我改变了jQuery,如果你不介意的话

All I've done was get images height and set animate on them with click on #toggle/#toggle2 CODEPEN

css  absolute  expand  relative