Question

这是jsfiddle。

我用一个activeX对象把它放在上面。

请允许您的浏览器安装它以重现此错误。

这里有快速代码预览。

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <div id="wanttooverlay" style="width:100px; height:100px; background-color:Red; position:absolute; top:0px; left:0px;"></div>
    <OBJECT style="width:500px; height:500px; background-color:blue;" id="Rdviewer" classid="clsid:ADB6D20D-80A1-4aa4-88AE-B2DC820DA076" type="application/html" codebase="rdviewer50.cab#version=5,0,0,239" >
        <param wmode="transparent" />
    </OBJECT>
</body>
</html>

我已经做了一些事情要解决，比如设置z-index，把param wmode =“transparent”等等。

但对我来说似乎没有任何解决方案。

红色框将是我的应用程序中的日期选择器。

这可以通过操纵CSS来完成吗？

FYI，我正在通过文档准备好的脚本实现对象标记。

这会是一个问题??

希望有人能解决这个问题。

Answer 1

在OBJECT内联样式中：

插入：

position:absolute;

更改为：

<OBJECT style="width:500px; height:500px; background-color:blue;position:absolute;" id="Rdviewer" classid="clsid:ADB6D20D-80A1-4aa4-88AE-B2DC820DA076" type="application/html" codebase="rdviewer50.cab#version=5,0,0,239" >
    <param wmode="transparent" />
</OBJECT>

注意：

尽量避免使用内联样式。
z-index仅适用于定位元素（位置：绝对， position：relative，或position：fixed）。

<强> JSFiddle Demo

Answer 2

另一种选择是从position:absolute删除div或者如果您希望这些元素在页面上浮动，请将它们放入具有绝对位置的div包装中

<div style="position:absolute; top:0; left:0">
    <div id="wanttooverlay" style="width:100px; height:100px; background-color:Red"></div>
    <OBJECT style="width:500px; height:500px; background-color:blue;" id="Rdviewer" classid="clsid:ADB6D20D-80A1-4aa4-88AE-B2DC820DA076" type="application/html" codebase="rdviewer50.cab#version=5,0,0,239" >
        <param wmode="transparent" />
    </OBJECT>
</div>

<强>更新

如果您想在div元素的基础上布置OBJECT，解决方案非常简单，只需在HTML代码中交换这些元素

<body>
    <OBJECT style="width:500px; height:500px; background-color:blue;" id="Rdviewer" classid="clsid:ADB6D20D-80A1-4aa4-88AE-B2DC820DA076" type="application/html" codebase="rdviewer50.cab#version=5,0,0,239" >
        <param wmode="transparent" />
    </OBJECT>
    <div id="wanttooverlay" style="width:100px; height:100px; background-color:Red; position:absolute; top:0px; left:0px;"></div>
</body>

查看this fiddle

对象标签覆盖div标签，我该如何防止这种情况？

2 个答案: