javascript - 检测 div 是否在其他元素之上(在视口(viewport)中可见)并溢出 :hidden

Question

我在 iframe 内的视频底部添加了一个 div。通常我将新的 Div 附加到 iframe 的父级，这很好。但是，如果一些父 div 有一些像 width:100% 和 overflow:hidden 这样的 css，它就不起作用并且 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/

这个不:

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

那么，我如何确保将新创建的 div 放在 iframe 视频的底部并确保它在视口(viewport)中可见？

我还使用了 elementFromPoint 来检测 div 是否可见，但没有成功。

Answer 1

您的 defaultPhoto div 的高度为 278px，然后在其中将照片 div 的高度设置为 100%(即 278px)，然后在其中将 iFrame 的高度设置为 278px。因此，iFrame 占据了父容器的全部高度——全部 100%。因此，如果您不允许溢出，您的新包装器 div 将看不到。如果您不想让溢出，解决此问题的方法是增加 defaultPhoto div 的大小。根据您的要求，您可以在添加新 div 时使用 javascript 执行此操作。查看此 fiddle ，它显示您的布局和更大的 defaultPhoto: http://jsfiddle.net/fn5zancp/2/

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