だから、私が直面する問題は次のようなものです:ページ上のpdfの上に配置されるレイヤーがあります。 PDFは埋め込みに使用しているか、iframeを使用してインクルードしています。ただし、CSSスタイルはPDFにプラグインであるため適用されません?)したがって、にz-index:1000を指定しても、そのレイヤーはPDFの背後に隠れます。
これがコードです:
<style type="text/css">
<!--#apDiv1 {
position:absolute;
left:543px;
top:16px;
width:206px;
height:223px;
z-index:1000;
background-color:#999999;
}
</style>
<body>
<!-- embed the pdf -->
<object data="test.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
alt : <a href="test.pdf">test.pdf</a>
</object>
<!-- layer -->
<div id="apDiv1" >Whatever text or object here.</div>
</body>
いくつかのフォーラムを読んだ後...(ここではいくつかのコメント)
PDFは、Acrobat Readerプラグインによってロードされます。これは、それ自体が独自のことであり、HTMLやブラウザとは関係ありません(ブラウザー。Flashプラグインに同じ問題があり、その解決策はありません。したがって、これに対する解決策もないと思います。メニューを再設計して、メニューが占有するスペースに移動しないようにすることをお勧めします。 PDF。
プラグインの場合、他の要素をその上に確実に配置することはできません。ブラウザは通常、プラグインが関係している場合に要素を「レイヤー化」する機能のほとんどを手放します。
APIまたはDomのいずれかでdivの「z-indexing」をオーバーレイするための直接サポートはありません。プラグインは、非常に簡単に言えば、ブラウザウィンドウに穴を開ける実行可能ファイルをロードします。 「iframeシム」手法を使用するのが標準的な回避策ですが、透明度は扱いにくい場合があります。
私の解決策:それぞれが異なるz-indexを持つdiv内にある2つのiframe、黄色のdivをクリックすると、空のiframeが(pdf iframeの前に)表示されるので、pdfドキュメント内に緑のdivが表示されます。
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
フェルナンドロドリゲス[email protected]
Jfixプラグイン bgiframe があり、この修正の実装がかなり簡単になります。
通常、divのすぐ下にiframeシムを配置することで、これらのz-indexの問題を回避できます。つまり、サイズと場所は同じですが、実際のコンテンツはありません。これがPDFで機能するかどうかは100%わかりませんが、これにより、他のいくつかのz-index問題(IE6の選択ボックスなど)が修正されることはわかっています。
divを動的に配置する場合、iframeシムを一緒に移動する必要があるため、iframeシムは面倒な場合があります。
私はこれに対する解決策を見つけました。 iframeでgoogle pdfビューアを使用してページにpdfを表示すると、他のdivと同じように機能します。
例:
<iframe id = "ifr" src = "http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true" style = "width:718px; height:700px ; " frameborder = "0">
IEテストの場合は、ComboBoxと同じ問題である可能性があります。divにiframeを挿入してみてください。
状況によっては、iframeをdivでラップし、divまたはiframeの親でスタイル属性 'clip'を使用するという解決策があります。
<!DOCTYPE html>
<html>
<head>
<title>Test Page - IFramed PDF Document Clipping</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type='text/javascript'></script>
<style type='text/css'>
body {padding:0em;margin:0em;font-size:16px;position:relative;}
body * {line-height:1em;}
#TOPNAV {list-style:none;display:block;}
#TOPNAV li {display:inline;}
#IFRAMEWRAPPER
{
display:block;margin:0em;padding:0em;
position:fixed;width:auto;left:0.125em;right:0.125em;top:4.125em;bottom:0.125em;
}
#docFrame {width:100%;height:100%;position:relative;margin:0em;padding:0em;}
input.ACTIVE {background-color:Gray;outline:0.125em solid silver;}
.clearfix {zoom:1;}
</style>
<script type='text/javascript'>
$(document).ready(function () {
$('#TOPNAV input').click(function () {
$("#TOPNAV input.ACTIVE").toggleClass('ACTIVE');
$(this).toggleClass('ACTIVE');
$("#IFRAMEWRAPPER").css("padding", "1em");
$("#IFRAMEWRAPPER").css("padding", "0em");
$("#IFRAMEWRAPPER iframe").toggleClass("clearfix");
$("#IFRAMEWRAPPER").toggleClass("clearfix");
$("#IFRAMEWRAPPER").hide();
$("#IFRAMEWRAPPER").slideDown(2);
});
$('#btnCLICK1').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, auto, 5em)");
});
$('#btnCLICK2').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, 5em, auto, auto)");
});
$('#btnCLICK3').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(5em, auto, auto, auto)");
});
$('#btnCLICK4').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, 5em, auto)");
});
});
</script>
</head>
<body>
<div class='TOPNAVWRAPPER'>
<ul id='TOPNAV'>
<li><input type='button' id='btnCLICK1' value='RIGHT' /></li>
<li><input type='button' id='btnCLICK2' value='LEFT' /></li>
<li><input type='button' id='btnCLICK3' value='BOTTOM' /></li>
<li><input type='button' id='btnCLICK4' value='TOP' /></li>
</ul>
</div>
<div id="IFRAMEWRAPPER">
<iframe id='docFrame' name='TargetFrame' src="YOUR-PDF-DOCUMENT.pdf" onloadeddata='' seamless='seamless' ></iframe>
</div>
</body>
</html>