Question

我的网站上有一个容器，就像我的例子一样：https://jsfiddle.net/j8z7hbc3/3/

现在当我点击按钮时，由于溢出：隐藏的数量不完全可见
有办法解决吗？

<div class="container">

   <div class="video-wrapper-absolute">
      <div class="video-wrapper">
         <iframe width="560" height="315" src="https://www.youtube.com/embed/C2VjWtMbrzQ?version=3&loop=1&playlist=C2VjWtMbrzQ&autoplay=1&showinfo=0&vq1080" frameborder="0" allowfullscreen></iframe>
      </div>
   </div>

   <div class="coupon"> 
      <div class="button">GET COUPON</div>
      <div class="amount" style="display:none;">25% OFF</div>
   </div> 

</div>

CSS：

.container { position:relative; width:100%; height:200px; overflow:hidden; }    

.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

#ytplayer { width:100%; height:100%; }

.coupon { background:orange; margin-top:158px; float:left; position:relative; }
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; }
.amount { background:purple; color:#fff; padding:6px; text-align:center; }

使用clearfix对我来说并不适合这种情况

Answer 1

您可以将其显示为如下例所示： https://jsfiddle.net/aukgf9qs/

我对CSS的更改是将所有容器类样式移动到.video-wrapper-absolute，因为我认为您只想隐藏视频的溢出。此外，我已设置按钮position: absolute;并将margin-top更改为刚刚top值，因为它现在使用绝对定位。

完整的CSS：

.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0;position:relative; width:100%; height:200px; overflow:hidden; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

#ytplayer { width:100%; height:100%; z-index:-1; }

.coupon { background:orange; top:158px; float:left; position:absolute; }
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; }
.amount { background:purple; color:#fff; padding:6px; text-align:center; }

尽管溢出隐藏，css使div可见

1 个答案: