z-index does not work in Internet Explorer with pd

bladefury 发布于2019-08-29 11:27 / 890人阅读

I know of one technique to reliably occlude windowed controls in IE with other elements, but you"re not going to like it.

Background: windowed and windowless elements

IE categorises elements into two types: windowed and windowless. Regular elements like div and input are windowless, rendered directly by the MSHTML engine. Windowed elements, however, are rendered in a separate MSHTML plane and get painted over any elements intruding in the space reserved for them. They respect z-index for each other, but always paint on top of windowless elements.

The only exception to this rule is iframe. In IE 5, iframe was a windowed element. This was changed in IE 5.5; it is now a windowless element, but for backwards compatibility reasons it will still draw over windowed elements with a lower z-index. Crucially, it also respects z-index for windowless elements—so if you position an iframe over a windowed element, any windowless elements you position over the iframe will be visible.

What this means

Essentially, the PDF is painted on top of the regular page content—like select elements were until IE 7. The easiest fix is to use another iframe positioned between your content and the PDF.

Demo

jsFiddle: http://jsfiddle.net/Jordan/gDuCE

Code

HTML:


    my text that should be on top

CSS:

#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

    #inner {
        background: red;
    }

    .cover {
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

#pdf {
    position: relative;
    z-index: 1;
}

Support

This has been tested and should work in IE 7–9. If you feel persnickety about it showing up in the DOM for other browsers, you can add it with JavaScript or wrap it in an IE-only conditional comment:

云服务器混合云 internet?explorer internet-explorer internet-explorer-9 internet-explorer-6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111656.html

z-index does not work in Internet Explorer with pd

I know of one technique to reliably occlude windowed controls in IE with other elements, but youre not going to like it. Background: windowed and windowless elements IE categorises elements into two t...

suemi 2019-08-01 15:52 评论0 收藏0
IE中iframe标签显示在DIV之上的问题解决方案

摘要：在之外呈现的元素是窗口化的例如，选择由呈现和控件。他们尊重彼此的顺序，但占据一个单独的平面，该平面绘制在所有无窗元素之上。在做网页时前端时，使用IE打开时会出现标题栏DIV被遮挡PDF遮挡，后在stackoverflow中查到是IE浏览器的问题：链接https://stackoverflow.com/questions/12911428/z-index-does-not-work-in...

MadPecker 2019-04-23 11:47 评论0 收藏0
前端基础知识之HTML

摘要：是文件的第一行代码，意味着它的前面有注释都不行。所以要要写在标签前面，而且它不属于标签。为了兼容以前的网站，所以产生了，浏览器会按照标准以前的简析方式去工作。但是他们在过期时间上有区别 [1: What does a doctype do?] 1: doctype是html文件的第一行代码，意味着它的前面有注释都不行。所以要要写在标签前面，而且它不属于html标签。 2: doctyp...

cfanr 2019-08-01 17:49 评论0 收藏0
Pythonic “Data Science” Specialization

摘要：温习统计学的知识为更深层次的学习做准备在的演讲中说就是我们理解但不知道另外的是如何的我在台下想对于那可以理解的我好像都只懂了参考标准高效的流程课程用的是我不想再学一门类似的语言了我会找出相对应的和的来源流程什么是干净的一个变 Why The Data Science Specialization 温习统计学的知识, 为更深层次的学习做准备 Andrew Ng 在 2015 GTC ...

jasperyang 2019-07-24 17:58 评论0 收藏0
Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分

摘要：修复后得到合法的后在由布局引擎建立相应的对象。在标签放置于标签之后时，源码被所有浏览器泛指上常见的修复为正常形式，即。上一篇之模板的学习之路源码分析之部分下一篇之模板的学习之路主题布局配置上篇我们将 body 标签主体部分进行了简单总览，下面看看最后的脚本部门。页面结尾部分（Javascripts 脚本文件）我们来看看代码最后的代码，摘取如下： ...

piglei 2019-08-20 10:30 评论0 收藏0