Question

我试图在StackOverflow上找到类似的问题，但只能找到与Flash对象相关的问题。

我正在尝试使用以下代码将div放在嵌入对象的顶部，并使用所有三个标记 - iframe，object＆amp;嵌入：

<html>
<head>
<style>
.overlay {
  background:#FFFFFF;
  border:1px solid #000000;
  padding:30px;
  position:absolute;
  top:20px;
  left:50%;
  width:100px;
  margin-left:-50px;
  z-index:99;
}

.wrapper {
  text-align:center;
  background:#F00;
  padding:20px;
  position:relative;
  z-index:2;
}

</style>
</head>

<body>
    <div class="overlay">Overlay DIV</div>
    <div class="wrapper">
        <embed width="100%" height="100%" src="http://www.foxitsoftware.com/resources/pdf/Datasheet_Reader.pdf" frameborder="0"></embed>
        <!--<object width="100%" height="100%" data="http://www.foxitsoftware.com/resources/pdf/Datasheet_Reader.pdf" frameborder="0"></object>-->
        <!--<iframe width="100%" height="100%" src="http://www.foxitsoftware.com/resources/pdf/Datasheet_Reader.pdf" frameborder="0"></iframe>-->

    </div>

</body>
</html>

它适用于最新版本的Firefox和Chrome，但不适用于IE9。我需要它在IE8及更高版本中工作。

是否可以在IE8 +中完成？

Answer 1

您可以在叠加层下放置iframe。 http://jsfiddle.net/emn178/64XeK/

<style>
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
</style>

<div class="overlay">Overlay DIV<iframe frameborder="0"></iframe></div>

这是我找到的最佳方式。

DIV在嵌入式文档中的绝对定位

1 个答案: