Question

这是我的代码，我想要的是将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>

Answer 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

Answer 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

也许这就是你要找的东西。

在IE中对象上的Div叠加

2 个答案: