object 定位 全屏 在浏览器中的问题

object元素由于其层级特性会遮挡div,而z-index无法解决此问题。iframe能遮挡object,但自身无法透明,导致新的问题。全屏时object可能出现仅显示左上角的异常情况,与CSS hover伪类冲突。解决方案包括利用iframe和透明性处理遮挡,以及避免使用hover伪类。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

object 遮挡div

object的层级属于windows层,与浏览器同级,故浏览器中设置z-index对其没有效果,会遮挡普通div,但iframe是个特例,能够遮挡object,于是想在object上面放置div就可以在object的上面加个iframe,再加自己的div。

即,类似如下代码

<div id="your-panel" style="position:relative;width:500px;height:500px;">
    <object width="100%" height = "100%"></object>
    <iframe src="about:blank" style="position:absolute;top:0;left:0;width:100%;height:44px"></iframe>
    <div id="your_div" style="position:absolute;top:5px;left:100px;width:200px;height:34px;"></div>
</div>

上面只是一个提供一个思路,你可以做自己的样式

这里还有个问题是iframe无法透明化,即加了iframe后会把底下的object遮挡,当然也可以使用iframe 的allowtransparency,然后引入一个空的背景为透明的页面来做透明,但这种情况下,object又会把上面的div层遮挡

object 全屏时只剩左上角一块,无法真正全屏

项目组里封装的object 无法与css样式中的hover伪类共存,只要存在hover伪类(a:hover可以,其他的我试了很多都不行)便会导致这个问题,于是只能去掉所有的hover伪类,运行正常

这个只是我遇到的问题解决办法,希望大家做个参考。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值