Позиционирование абсолютного DIV на страницу вне относительного DIV

У меня есть абсолютный div внутри относительного div. По сути, это контейнер для абсолютно позиционированного углового баннера в верхней правой части страницы.

Он отлично работает с Chrome, но не с IE. В IE он отображается абсолютно, но внутри своего контейнера. Я хотел бы переопределить это, если это возможно, из-за того, как построен этот сайт (полный шаблон на CMS):

#corner-banner a {
position: absolute;
right: 0;
top: 0;
display: block;
height: 200px;
width: 200px;
background: url(../images/down.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}

#corner-banner a:hover {
background: url(../images/up.png) no-repeat;
}

Спасибо за чтение и за любой вклад.

Ваше здоровье!


html css internet-explorer css-position
person acseven    schedule 10.01.2012    source источник
comment
Я не совсем уверен, что вы говорите, но похоже, что веб-сайт ведет себя в IE так, как должен. Внутренний div с абсолютным позиционированием находится в правом верхнем углу родительского контейнера?. Именно это и делает position: relative. Это означает, что дочерние элементы, установленные в absolute, будут относиться к этому контейнеру, а не к странице. И в вашем описании вы говорите о div, но ваш css нацелен на a.   -  person tw16    schedule 10.01.2012
comment
Привет, спасибо за ответ. Что касается тега a по сравнению с div, у меня была проблема с песком только с div, но я использовал тег a для лучшего поведения, т.е. при опрокидывании.   -  person acseven    schedule 10.01.2012
comment
А насчет ожидаемого поведения ie и относительных тегов - это я понимаю, но именно это я и пытаюсь обойти. Спасибо!   -  person acseven    schedule 10.01.2012
comment
Я не вижу никакой разницы. Нам нужна ссылка или jsfiddle.   -  person Rob    schedule 10.01.2012

Ответы (2)


arrow_upward
1
arrow_downward

Это правильное поведение. Абсолютная позиция внутри относительно позиционированного элемента будет абсолютно позиционирована относительно содержащего его элемента.

person Bryan Naegele    schedule 10.01.2012

arrow_upward
0
arrow_downward

Вы уверены, что родительский относительный контейнер - это div, а не td?

ИЗМЕНИТЬ

ok

Это не проблема CSS, а плохая организация HTML. Итак, если вы хотите, чтобы ваш элемент позиционировался окном, а не его относительными родительскими координатами, вы должны поместить его вне относительного элемента.

Что-то подобное :

<body>
  <div id="corner-banner" class="norelative_element">
    <!-- Your content with absolute position by the window !-->
    <a>...</a>
  </div>
  <div class="relative_element">
    <!-- Your content with relative position !-->
  </div>
</body>
person Valky    schedule 10.01.2012
comment
Да, это внутри div, а не таблицы td. - person acseven; 10.01.2012