我的网站上有一个容器中的按钮,就像我这里的例子: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 对我不起作用
最佳答案
您可以使其可见,如本例所示: 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 可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39302320/