將絕對元素置於絕對內。 IE

我不知道這個確切的問題是否被問過，如果是的話，我很抱歉。我可以在我的辯護中說我已經用熟悉的標題檢查了大約10個問題。將絕對元素置於絕對內。 IE

問題是這樣的：

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

其中一個容器的對象或嵌入在體內標記絕對定位。取決於哪個瀏覽器。對於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我使用相對/絕對定位來模擬交叉瀏覽器的固定位置，所以我不能放棄它。但按鈕的行爲是不可接受的=）將它直接放在電影裏面會很棘手，我希望它可以在沒有它的情況下完成。雖然這是一個更簡單的方法。但更多的工作爲每部電影。

我會重複的問題是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中跑掉」。

來源

2011-06-30 Olga

你可以發佈你的包含按鈕的標記嗎？（也是你的CSS對象/嵌入或它的父div） – quoo

什麼是絕對定位的對象最接近的父母（&&有位置：相對）？ – Marcus

意思是整個代碼？好吧，它很大，但 – Olga

代替絕對定位對象/嵌入，將其放置在一個包裝和絕對位置，所述包裝。我還會將按鈕放在包裝中，以便相對放置它，但仍可從外部容器的絕對位置獲益。

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

#wrapper{position: absolute;}

來源

2011-06-30 14:50:58 quoo

我會再次嘗試，只是爲了確保。但正如我記得這種方法沒有奏效。 – Olga

我試過了，它現在工作了，我給了它更多的想法，我會爲你放上一個箭頭=）但是我沒有足夠的聲望呢 – Olga

@Olga：歡迎來到StackOverflow！您可以通過單擊向下箭頭下方的大型勾號符號來接受該答案，即可解決您的問題。然後蜱會變綠，每個人都會看到這是被接受的答案。如果你這樣做，你甚至可以自己獲得聲望點...... ;-) – awe

我相信你必須把你的電影和按鈕（被絕對定位）放在一個div位置上：relative;而寬度和高度（只是要確定）

<div id= "wrap"> 
    <object> 
    <embed id="movie"> 
    </embed> 
    </object> 
    <img src="" id="closeButton" /> 
</div>

所以CSS然後將

#wrap 
{ 
     position:relative; 
     width:640px; 
     height:360px; 
} 
#movie 
{ 
     position:absolute; 
     width:640px; 
     height:360px; 
     z-index:100; 
     top:0; 
     left:0; 
} 
#closeButton 
{ 
     position:absolute; 
     right: 10px; 
     bottom:55px; 
     z-index:400; 
     background: none; 
}

大多數定位問題，我覺得是因爲我沒有的東西把它包起來，其定位：相對的。我希望這有幫助。

DEMO：http://jsfiddle.net/derno/C8FHR/

來源

2011-06-30 14:27:03 derno

謝謝你）我還沒有解釋它，但如果我換你的建議，我的電影將出現在哪裏？在包裝中。這正是我不需要的。我的電影將在主要內容上浮動並在窗口中保持固定位置。這就是爲什麼它在正文和所有其他頁面內容都是封裝。這實際上是一種模仿固定職位而不是職位的工作方法：固定; – Olga

將絕對元素置於絕對內。 IE

回答

相關問題