Поместите абсолютный элемент в абсолют. 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, как вы можете догадаться. Там видна не только кнопка, но и относительная часть ОКНА! То есть за много миль от фильма.

Я добавил своего рода хак, использующий 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".

Answer 1

Вместо абсолютного позиционирования объекта / встраивания, поместите его в обертку и обязательно разместите указанную обертку. Я бы также поместил кнопку в обертку, чтобы вы могли позиционировать ее относительно, но при этом все равно выиграл бы от абсолютного расположения внешнего контейнера.

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

#wrapper{position: absolute;}

Answer 2

Я считаю, что вы должны обернуть свой фильм и кнопку (которые позиционируются абсолютно) в div, который имеет позицию: относительный; а ширина и высота (просто чтобы быть уверенным)

<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;
 }

Большинство проблем с позиционированием, которые я нахожу, связаны с тем, что я не обернул их во что-то позиционированное: относительное Надеюсь, это поможет.

ДЕМО: http://jsfiddle.net/derno/C8FHR/