Question

我在iframe内的视频底部添加了一个div。一般来说，我将新的Div添加到iframe的父母那里，并且没问题。但是，如果某些父div有宽度的css：100％和溢出：隐藏，它不起作用，div仍然在iframe的视频后面。

<style>
    .defaultPhoto{
        width: 434px;
        height: 278px;
       overflow: hidden;
    }
    .defaultPhoto .photo{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .wrapper{   background: red; }
</style>

<div class="defaultPhoto">
    <div class="photo">
        <iframe width="434" height="278" src="https://www.youtube.com/embed/2xbgl7OJrg4"></iframe>
        <div class="wrapper" id="Div0" >test</div> 
    </div>    
</div>

这有效：

http://jsfiddle.net/kav7b3os/87/

这个NO：

http://jsfiddle.net/kav7b3os/70/

那么，我怎样才能确保将新创建的div放在iframe视频的底部并确保它在视口中可见？

我还使用了elementFromPoint来检测div是否可见，没有运气。

Answer 1

你的defaultPhoto div的高度为278px，然后在你的内部你已经将你的照片div的高度设置为100％（即278px），然后在你的内部，你将你的iFrame的高度设置为278px。因此，iFrame占据父容器的整个高度 - 完全100％。因此，如果您不允许溢出，则无法看到新的包装div。解决此问题的方法是，如果您不想允许溢出，则增加defaultPhoto div的大小。根据您的要求，您可以在添加新div时使用javascript执行此操作。看看这个小提琴，显示你的布局与更大的defaultPhoto： http://jsfiddle.net/fn5zancp/2/

.defaultPhoto{
  width: 434px;
  height: 318px;
  overflow: hidden;
}

检测div是否位于其他元素的顶部（在视口中可见），溢出：隐藏

1 个答案: