html - 在 absolute 中放置一个绝对元素。 IE

Question

我不知道是否有人问过这个确切的问题，如果是的话，我很抱歉。我可以为自己辩护说，我已经检查了大约 10 个标题熟悉的问题。

问题是这样的:

<div id= "">
<object>
   <embed>
      <img src="" />
   </embed>
</object>
</div>

其中一个容器对象或嵌入绝对定位在 body 标签中。取决于哪个浏览器。对于 IE 6 7 8 嵌入绝对是药水。对于其他对象。

反复试验使我找到了这个解决方案，感谢上帝，它在所有浏览器中都运行良好。

现在我要添加一个按钮，它由 IMG 标签表示，我也想绝对定位它(相对于我的电影)。在所有浏览器中(IE 6 7 8 除外)，这适用于以下 CSS:

#closeButton
{
    position:absolute;
    right: 10px;
    top: 10px;
    z-index:400;
    /*background: none;*/
    /*display:none;*/
}

由于我的对象一直隐藏到某个时候，所以按钮也隐藏在其中/与它一起隐藏。

不像您猜的那样在 IE 中。在那里，不仅按钮可见，而且与 WINDOW 相关!意思是远离电影。

我添加了一种技巧，使用 JS 隐藏/显示 CSS 现在的按钮:

#closeButton
{
    position:absolute;
    right: 10px;
    bottom:55px;
    z-index:400;
    background: none;
    display:none;
}

而且它在正确的位置和电影一起隐藏和显示。猜猜是什么，但是，点击它变得很棘手 =) 因为每当我将鼠标放在按钮上时，电影都会触发一个 onRollOut 事件，它们都消失了 =) 好笑

问题:为什么我的按钮位置相对于窗口？或者问题可能隐藏在其他地方？

PS 我正在使用相对/绝对定位来模拟跨浏览器固定定位，所以我不能放弃它。但是这个按钮的行为是 Not Acceptable =)而且直接把它放在电影里会很棘手，我希望没有它也能做到。虽然这是一种更简单的方法。但每部电影都需要更多工作。

我会重复这个问题仅适用于 IE，在所有其他浏览器中按钮的行为。

完整代码

http://pastebin.com/fZvWyVsF

http://pastebin.com/zJBhNeVB

更新:

我尝试遵循有关定位包装器的建议，并进行了一些修改。现在我有了这段代码

<div  id="bigBanner">
        <OBJECT width="100%" height="90"> 
        <PARAM NAME="quality" VALUE="high">
        <PARAM NAME="wmode" VALUE="opaque" >
        <PARAM name="AllowScriptAccess" VALUE="always" >
        <EMBED  src="big.swf" width="100%" height="90" wmode="opaque" quality="high" AllowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
        </EMBED>
        <noembed></noembed>
        </OBJECT>
        <div id="closeButton"><img src="close-box.jpg"  onClick = "HideAll();" title="Закрыть"/></div>
    </div>

拥有那些风格:

http://pastebin.com/dCULjHva

它很好地显示了按钮。但它(按钮)再次“在 IE 中跑掉”。

Answer 1

不是绝对定位对象/嵌入，而是将其放在包装器中并绝对定位所述包装器。我还将按钮放在包装器中，这样您就可以相对定位它，但仍然受益于外部容器的绝对定位。

<div id= "wrapper">
<object>
   <embed>
      <img src="" />
   </embed>
</object>
<div id="button">foo</a>
</div>

#wrapper{position: absolute;}