IE中对象上的div覆盖答案

【问题标题】：Div overlay on an object in IEIE中对象上的div覆盖
【发布时间】：2015-02-15 01:05:09
【问题描述】：

这是我的代码，我想要的只是将 div 覆盖在 IE10 中的一个对象上。它在 Chrome 中运行良好，但在 IE10 中运行良好。现在，如果您在 IE10 中对此进行测试 - div 会在后台运行。

有什么诀窍？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
            <title>Testing OBJECTS..</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />      
        </head>
        <body>

            <div id="something">

                <!-- IE Object -->
                <div style="z-index:0; position:absolute; background: #000">
                    <object width="800" height="480" classid="CLSID:7FD49E23-C8D7-4C4F-93A1-F7EACFA1EC53" className="" innerHTML="&#10;&#10;">
                        <PARAM NAME="_cx" VALUE="21167">
                        <PARAM NAME="_cy" VALUE="12700">
                    </object>

                </div>

                <!-- Annotations needs to move on top for IE -->
                <div id="something-2" style="z-index:1; position:relative; background-color:#ddd;width:200px;height:200px;display:block;">
                    This div needs to be on the top
                </div>

                <div class="someotherclass" style="display: none;">
                    Something here..
                </div>

                <div id="something-3"></div>

            </div>

        </body>
    </html>

【问题讨论】：

标签： javascript jquery css internet-explorer-10

【解决方案1】：

在 Internet Explorer 中定位的元素会生成一个新的堆叠上下文，从 z-index 值 0 开始。因此 z-index 无法正常工作。

但是，您可以将 id 为 something-2 的 div 与另一个具有更高 z-index 的 div 包装起来，然后它就可以正常工作了。

查看链接： http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

【讨论】：

【解决方案2】：

Css 位置可能有点棘手

我只是改变了一点你的 html

<div id="something">

    <!-- IE Object -->
    <div style="position:relative; background: #000">
        <object width="800" height="480" classid="CLSID:7FD49E23-C8D7-4C4F-93A1-F7EACFA1EC53" className="" innerHTML="&#10;&#10;" style='display: block;'>
            <PARAM NAME="_cx" VALUE="21167">
            <PARAM NAME="_cy" VALUE="12700">
        </object>
        <!-- Annotations needs to move on top for IE -->
        <div id="something-2" style="z-index:1; position:absolute; background-color:#ddd;width:200px;height:200px;display:block; top:0">
        This div needs to be on the top
        </div>
    </div>

    <div class="someotherclass" style="display: none;">
        Something here..
    </div>

    <div id="something-3"></div>
</div>

http://codepen.io/aloayzab88/pen/xbYYwv

也许这就是你要找的。p>

【讨论】：

不，这也不起作用。