VUE 引用OCX控件，div 被Object遮挡问题

最新推荐文章于 2024-01-22 13:14:42 发布

前端小小小学生

最新推荐文章于 2024-01-22 13:14:42 发布

阅读量1.4k

点赞数 1

分类专栏： ocx 文章标签： ocx html

本文链接：https://blog.csdn.net/qq_36877213/article/details/102523278

版权

ocx 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue引用OCX控件，需要在控件之上添加一个导航栏，但被控件遮挡，添加z-index不生效。在网上找到一些解决方法记录一下；
这个方法是在需要浮动的窗口div添加一个iframe，因为iframe的级别高于select下拉列表和Object控件，而又由于div能够遮挡iframe，所以可以通过在div中加入iframe来解决该类问题

    <div class="rightf" style="position: absolute;top: 0;right: 0;width: 50px;height:100%;background: #42B983;z-index: 99999999;">
      <iframe id="iframe1" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0" style="position:absolute; visibility:inherit; top:0px;right:0px;width:50px; height:100%;z-index:-1; filter:alpha(opacity=0);"></iframe>
      <ul class="hul">
        <li><Icon type="ios-notifications-outline" /></li>
        <li><Icon type="ios-person-outline" /></li>
        <li><Icon type="ios-paper-outline" /></li>
        <li><Icon type="logo-nodejs" /></li>
        <li><Icon type="ios-notifications-off-outline" /></li>
      </ul>
    </div>
    <div >
        <router-view></router-view>
    </div>

注意：
1.div必须有特定的z-index且大于iframe的z-index，不能是auto或空；2.iframe的z-index必须为负，否则div无法遮盖iframe；
3.iframe的top和left为0，且iframe的宽、高与div的宽高相等；
4.注意设置iframe的透明度为0.