美文网首页
object元素覆盖div的处理

object元素覆盖div的处理

作者: LongfeiSong | 来源:发表于2017-03-02 15:50 被阅读0次

解决div和object元素重叠时div被object覆盖的问题:
在div内插入iframe元素,定位z-index=-1,透明度0,div定位z-index大于iframez-index即可。

<div id="div" style="display:none;width:300px;height:300px;background-color:#ccc;margin-bottom:10px;position:absolute;z-index:100;left:300px;top:100px;font-size:50px;color:#999;">这是在Object元素上层的div<div><button onclick="alert(new Date)">button</button></div><iframe id="iframe1" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0" style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%;z-index:-1; filter:alpha(opacity=0);"></iframe></div>
<div style="width:800px;margin:0 auto;">
<object id="view1" style="position:relative;z-index:0;" type="application/x-eloamplugin" width="400" height="300" name="view"></object>
<div style="display:inline-block;width:120px;padding-left:15px;">
<input class="submit_01 btn" type="button" value="打开视频" onclick="OpenVideo()" /><br />
<input class="submit_01 btn" type="button" value="关闭视频" onclick="CloseVideo()" /><br />
<button class="submit_01 btn" type="button" onclick="Scan()"><span style="letter-spacing:2em">拍</span>照</button><br />
<input class="submit_01 btn" type="button" value="上传图片" onclick="UploadThumbToServer()" /><br />
<input class="submit_01 btn" type="button" value="参数设置" onclick="ShowProperty()" /><br />
<div style="display:inline-block;padding-bottom:10px">
<input id="SetState" type="checkbox" value="" onclick="SetState(this)" /><label for="SetState" style="line-height:16px;">手动框选</label><br />
<input id="EnableDate" type="checkbox" value="" onclick="EnableDate(this)" /><label for="EnableDate" style="line-height:16px;">添加日期</label>
</div>
</div>
<object id="thumb1" type="application/x-eloamplugin" width="95%" height="130" name="thumb"></object>
<br />
<div class="btn-wrap" style="display:none">
<label id="lab1">设备</label>
<select id="device" class="sel" name="device" onchange="changeDev()"></select>
<select id="subType" class="sel" name="subType" onchange="changesubType()"></select>
<label>分辨率</label>
<select id="selRes" class="sel" name="selRes"></select>
<span style="color:#f00;font-size:14px;font-weight:bold;">更改设备/分辨率后需重新打开视频</span>
</div>
</div>

相关文章

  • object元素覆盖div的处理

    解决div和object元素重叠时div被object覆盖的问题:在div内插入iframe元素,定位z-inde...

  • object覆盖的div解决办法

    最近做个web项目,因为里面有个object的插件,弹出对话框会被其遮盖,我做了个iframe标签,在弹框时...

  • css修改下拉列表select的默认样式

    html 代码: 芝士 奶油 给select添加父元素div目的是为了,用div的样式覆盖住select样式 ...

  • 点击上传和拖拽上传

    点击上传 利用 type="file" 的 input,上面覆盖一个 div 或者其他元素,点击该元素时触发 in...

  • css选择器分类

    元素选择器单一的元素,覆盖面广div{board:1px solid #eee} 选择器分组值多个元素,应用相同的...

  • Html + Css +Javascript实现模态框

    首先在html上定义两个div元素,其中外层div表示模态框外面的覆盖层(overlay layer), 内层的d...

  • JavaScript 中的事件处理如何运行?

    如下图所示,我们有三个 div 元素。每个div都有一个与之关联的点击处理程序。处理程序执行以下任务: Outer...

  • css 图片等比缩放

    CSS3 object-fit处理图片object-fit: fill; 填充元素的内容框,会拉伸o...

  • 学习日志:CSS盒模型

    盒模型 俗称框模型。它定义了元素框处理元素中的内容、内边距、边框,外边距的方式。 页面元素皆为盒模型,div、...

  • jquery

    mouseleave和mouseenter区别 关键点:冒泡的方式处理问题 例: 如果p元素和div元素都绑定了m...

网友评论

      本文标题:object元素覆盖div的处理

      本文链接:https://www.haomeiwen.com/subject/szqkgttx.html