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

Question

我的网站上有一个容器中的按钮，就像我这里的例子:https://jsfiddle.net/j8z7hbc3/3/

现在当我点击按钮时，由于 overflow:hidden 数量不完全可见
有办法解决吗？

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