我需要一个嵌入式pdf(我试过嵌入式和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();
});
帮我堆栈溢出,你是我唯一的希望。
答案 0 :(得分:0)
看起来非常相关: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>