z-index does not work in Internet Explorer with pd

bladefury 發(fā)布于2019-08-29 11:27 / 1000人閱讀

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:

云服務(wù)器 GPU云服務(wù)器 internet?explorer internet-explorer internet-explorer-9 internet-explorer-6

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111656.html

發(fā)表評論

登陸后可評論

0條評論

bladefury

男|高級講師

我要關(guān)注我要私信

TA的文章

前端總結(jié)

閱讀 2892·2019-08-30 15:55
前端如何讓網(wǎng)頁打印時每一頁都有固定的頭部，且在達(dá)到固定高度時自動分頁

閱讀 1993·2019-08-30 14:02
[CSS]CSS中使用span和div遇到的問題

閱讀 1231·2019-08-29 15:23
z-index does not work in Internet Explorer with pd

閱讀 1001·2019-08-29 11:27
JavaScript 并行和串行任務(wù)/流程控制的實現(xiàn)

閱讀 457·2019-08-26 11:43
平時工作和學(xué)習(xí)中遇到的知識點（2）

閱讀 3184·2019-08-26 10:32
記錄一次搜狐面試（包括筆試題）

閱讀 1249·2019-08-23 14:41
前端基本功-常見概念(一)

閱讀 3295·2019-08-23 14:41

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

z-index does not work in Internet Explorer with pd

相關(guān)文章