嵌入式 pdf 在 Opera 浏览器中始终位于顶部答案

【问题标题】：Embedded pdf is always on top in Opera browser嵌入式 pdf 在 Opera 浏览器中始终位于顶部
【发布时间】：2015-06-08 11:00:43
【问题描述】：

我需要一个嵌入式 pdf（为此我尝试了 embed 和 iframe），上面有一个人们可以在上面绘制的画布（透明）。

在 Opera 中，嵌入的 pdf 总是在顶部。

http://plnkr.co/edit/c1LlRiw2eLiZsp2VAmvb?p=preview

HTML：

<div class="background">
  <iframe src="http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf"></iframe>
</div>
<div class="canvas-container">
    <canvas width="400" height="400"></canvas>
</div>

CSS：

.background, .canvas-container
{
    width: 400px;
    position: absolute;
    top: 0; left: 0;
}

.background {
    height: 300px;
    background-color: #367889;
    border: 1px solid red;
    z-index: 1;
}

.canvas-container {
    height: 400px;
    border: 1px dotted blue;
    z-index: 2;
}

Javascript：

document.addEventListener("DOMContentLoaded", function() {
  var ctx = document.getElementsByTagName('canvas')[0].getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(400, 400);
  ctx.stroke();
});

帮我stackoverflow，你是我唯一的希望。

【问题讨论】：

标签： javascript css html

【解决方案1】：

看起来很相关的事情：z-index does not work in Internet Explorer with pdf in iframe

我不了解 Opera，但我能够使用 IE10 看到您的问题。虽然看起来特定于 pdf，因为这段简短的代码可以很好地工作：

<!DOCTYPE html>
<html>

<body>
  <div>
    <iframe src="http://www.w3schools.com" style="position: absolute;">
      <p>Your browser does not support iframes.</p>
    </iframe>
    <div style="height: 300px; width: 200px; background-color:black; position: absolute;">
    </div>
  </div>
</body>

</html>

【讨论】：

谢谢，我会尽快测试它（我现在使用 pdfjs，这当然可以，因为它在画布元素上呈现 pdf）。