html - 通过iframe进行实时视频录制

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

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

有人可以帮我吗？

最佳答案

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

<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: