css iframe阻止z-index工作?

iezvtpos  于 12个月前  发布在  其他
关注(0)|答案(3)|浏览(143)

我一直在尝试使用z-index css属性来使一个元素总是位于另一个元素的前面,但它不起作用。一个元素的z-index明显大于另一个元素的z-index,但它仍然位于另一个元素的后面。可能是因为其中一个元素(显示在前面的那个)是iframe吗?有人有其他建议吗?

bogh5gae

bogh5gae1#

对于那些稍后到达这里的人,正确的答案是将position: relative;或任何其他position prop 放在有问题的元素上。
我的建议是把它放在与问题有关的每一个元素上:

position: relative;
z-index: 0;

字符集
然后在iframe前面的最后面的元素上增加z-index
如果你这样做,你会很快开始赢。
在我的测试中,z-index只有在显式设置了position的情况下才能工作。通过调整z-index值,然后尝试通过鼠标点击突出显示屏幕上的文本来测试它。你应该看到层的行为是否符合要求或严重错误。
我发现如果你按下F12(打开开发窗格,在Chrome中),然后点击左上角的检查按钮或按下CTRL + CTRL + C,效果很好。

UX奖励提示:请记住,用户可能希望复制文本,因此请确保他们可以选择它。

如果你有问题,你很可能是:
1.元素的父元素上缺少position: relative;,或者
1.在某处丢失z-index: 0;

yc0p9oo0

yc0p9oo02#

请记住,z-index索引只计算绝对元素。两个元素都应该有位置:absolute。CSS 2.1规范中的更多信息

bvjxkvbb

bvjxkvbb3#

要解决此问题,请将iframe Package 在容器中并对其应用CSS位置(相对,绝对,固定),z索引为0。例如,我遇到了一个问题,我的iframe菜单隐藏在iframe内容后面。通过将iframe Package 在容器中并将其z索引设置为零,问题已解决。检查示例图像,其中整个页面都来自iframe,除了标题和菜单。enter image description here

<div style="position: fixed; z-index: 0;">
  <iframe title="iframe" src=" https://social.jato-live.com/members " id="iFrameResizer1" scrolling="yes" style="min-height: 90vh; min-width: 100%; overflow: auto;"></iframe>
</div>

字符集

相关问题