html - div over iframe 实时视频录制

Question

这是我的 HTML。我正在尝试在录像机 iframe 上覆盖一个红色的小 div。

<div style="overflow: hidden; 
            margin: 15px auto; 
            max-width: 480px; 
            height: 350px; 
            float: right;
            top: -316px; 
            position: relative; 
            left: -50px; 
         /* margin-right: 100px; */ 
            vertical-align: top;
            display: inline-block; 
            border: solid 2px black; 
            background: none;">

    <iframe style="position: relative;
                   margin-left: -185px; 
                   height: 1000px; 
                   margin-top: -230px;
                   width: 850px;" scrolling="no" src="http://www.red5-recorder.com/demo.php">
    </iframe>

    <div id="red" style="border: 2px red solid; 
                         z-index: 999;
                         position: absolute;
                         width: 290px; 
                         height: 180px;
                         float: right;
                         margin-right: 160px;
                         margin-top: 100px;"></div>

</div>

谁能帮我解决这个问题？

Answer 1

您需要一个包装器来设置绝对定位元素的原点:

<div style="position:relative">
 <iframe scrolling="no" src="http://www.red5-recorder.com/demo.php" style=" position:relative;                         margin-left: -185px; height:1000px; margin-top: -230px; width: 850px;">
  </iframe>
    <div id="red" style="border: 2px red solid; z-index:999; position:absolute;width:290px; height:180px;top:0;left:0"></div>
</div>

此外，您不要将 float: 与绝对定位的元素一起使用。您还需要指定位置 top: 或 bottom: 和 left: 或 right: