質問失礼します。

ieでz-indexを使用した際、positionのrelative or absoluteを使用しないとz-index効かないのは知っていますが、positionを使用してもz-indexが効かない場合はどうすればいいでしょうか？

z-indexが効かないのはobjectでPDFを使用した時です。
PDFの部分を背面にしたいのですが背面にいきません。

HTMLは次のように記述しています。

<div class="PDF">
<object style="width:100%; height:1000px; position:relative;" data="http://sample.com/pdf/sample.pdf &#10;" type="application/pdf" 　="" internalinstanceid="3"></object>
</div>

cssで.PDFや.PDF objectにposition:relativeとz-index:-999を付加しましたがそれもだめでした。

何かいいやり方があればぜひご教授よろしくお願いします。

liveasnotes

2018/08/19 11:10

一応聞いておきますが，type属性とinternalinstanceid属性の間の，「=""」はコピペミスでしょうか？

ringo_ame

2018/08/21 03:09

コピペミスではなく実際にこういった記述でした。

ringo_ame

2018/08/21 03:34

「=""」を削除しても結果は変わりませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

ｚ-indexは効いてそうです（PDFの後ろにもう1枚PDFが見える）
たぶん，バグですね

HTMLタグだけで PDF を埋め込み表示する方法

を見て，こんなコードで試してみましたが

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5    <head>
6        <meta charset="utf-8">
7        <meta name="author" content="liveAsNotes">
8        <meta name="description" content="this is a demo">
9        <meta name="format-detection" content="telephone=no, address=no, email=no">
10        <meta name="viewport" content="width=device-width, initial-scale=1.0">
11        <meta http-equiv="X-UA-Compatible" content="IE=edge">
12        <style>
13            *,
14            *::before,
15            *::after{
16                font-weight: normal;
17                line-height: 1em;
18                padding:0;
19                margin: 0;
20                box-sizing: border-box;
21                -webkit-tap-highlight-color:rgba(0,0,0,.1);
22            }
23            html,body{
24                width: 100vw;
25                height: 100vh;
26                overflow-x: hidden;
27            }
28            html{
29                font: normal 17px / 17px sans-serif;
30                -webkit-text-size-adjust: 100%;
31            }
32            body{
33                position: relative;
34                padding: 3rem;
35            }
36            header{
37                position: fixed;
38                top: 0;
39                left: 0;
40                z-index: 1;
41                width: 50%;
42                padding: 5em 3em;
43                background: skyblue;
44                opacity: .7;
45            }
46            header:before{
47                content: "header";
48            }
49            object{
50                position: absolute;
51                z-index: -1;
52                top: 2em;
53                width: 900px;
54                height: 80vh;
55                background: yellow;
56                border: 5px solid yellow;
57            }
58            iframe{
59                width: 100%;
60                height: 100%;
61                padding: 1em;
62                background: palegreen;
63            }
64        </style>
65        <title>demo</title>
66    </head>
67    <body>
68        <header></header>
69        <object data="sample.pdf" type="application/pdf">
70            <iframe src="sample.pdf">
71                <p><b>表示されない時の表示</b>: <a href="pdf.pdf">PDF をダウンロード</a>.</p>
72            </iframe>
73        </object>
74    </body>
75
76</html>

無効なパスにしたとき

有効なパスにしたとき

fixedの上にくるとかもうバグだろ...

iframeの中にさらにobjectが勝手に生成されてたので，
borderつけてみましたが，要素自体は他の要素の下に表示されてます

意味が分からないよ...

分かったこと：IEはPDFをどうしても最前面に表示したがる
解決方法：他の要素にかぶらないようにサイズ調整する

よくよく考えたらPDFの前面に要素が被ってるのって，PDFの操作盤のふりして不正コードをユーザーの操作によって実行させたりできちゃうから，セキュリティ的に問題ありなんだよなあ...

もしかして，仕様？...と思ったらこんなの発見，
https://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe

これいけるのでは...？！
：
：
：

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5    <head>
6        <meta charset="utf-8">
7        <meta name="author" content="liveAsNotes">
8        <meta name="description" content="this is a demo">
9        <meta name="format-detection" content="telephone=no, address=no, email=no">
10        <meta name="viewport" content="width=device-width, initial-scale=1.0">
11        <meta http-equiv="X-UA-Compatible" content="IE=edge">
12        <style>
13            *,
14            *::before,
15            *::after{
16                font-weight: normal;
17                line-height: 1em;
18                padding:0;
19                margin: 0;
20                box-sizing: border-box;
21                -webkit-tap-highlight-color:rgba(0,0,0,.1);
22            }
23            html,body{
24                width: 100vw;
25                height: 100vh;
26                overflow-x: hidden;
27            }
28            html{
29                font: normal 17px / 17px sans-serif;
30                -webkit-text-size-adjust: 100%;
31            }
32            body{
33                position: relative;
34                padding: 3rem;
35            }
36            
37            #div-text{
38                position:relative;
39                left:250px;
40                top:50px;
41                background: skyblue;
42            }
43
44            #shouldBeOnTop{
45                position:relative;
46                background-color:red;
47                width:100px;
48                height: 100px;
49                z-index:2;
50            }
51
52            #div-frame{
53                position:relative;
54                z-index:1;
55                width: 300px;
56                height: 300px;
57                background: yellow;
58            }
59            iframe{
60                width: 100%;
61                height: 100%;
62            }
63        </style>
64        <title>demo</title>
65    </head>
66    <body>
67        <div id="div-text">
68              <div id="shouldBeOnTop">my text that should be on top</div>
69        </div>
70        <div id="div-frame">
71            <iframe src="sample.pdf"></iframe>
72        </div>
73
74    </body>
75
76</html>