Абсолютно расположен за пределами AP Parent для отображения

Question

Я разрабатываю простое картографическое приложение для клиента, которое использует XML, CSS и jQuery. У меня работает базовая функциональность, но я немного озадачен одной вещью. «Карта» - это большое изображение со скрытым переполнением. Затем, читая XML, jQuery размещает «зоны» (a теги) на изображении, размещая их абсолютно на родительской карте.

Эта зона содержит два абсолютно позиционированных элемента, которые должны выходить за пределы родительского элемента. Работает исключительно в Chrome, Firefox и Safari, но IE обрезает все, что идет над родителем. код выглядит примерно так:

<div style="overflow:hidden; width:800px; height:600px;"> 
    <div style="width:1600px; height:1200px; position:relative"><!-- missed out of original post -->
    <div style="position:absolute; left:10px; top:10px; width:100px; height:100px; z-index:10">
        <a href="#" style="position:absolute; left:80px; top:80px; width:100px; height:30px; z-index:20">&nbsp;</a>
        <a href="#" style="position:absolute; left:-10px; top:90px; width:10px; height:100px; z-index:30">&nbsp;</a>
    </div>
    </div>
</div>

Это нормальное поведение отсечения или я что-то упускаю?

РЕДАКТИРОВАТЬ: я пропустил главную карту div из исходного поста.

Answer 1

Я прошу прощения за это, но я ответил на свой вопрос.Проблема не имела ничего общего с моим CSS или HTML, это было связано с моим Javascript.

Я использовал функцию fadeTo, чтобы скрыть все элементы на карте, включая сами зоны, а затем при перерисовке зон и содержащихся в них элементов IE обрезал изображения.

Проблема была устранена путем удаления замирания в зоне div и просто замирания внутренних битов.Теперь он работает как шарм.

$('div > div > div, div > div > div *').fadeTo('slow', 0);
//this is now
$('div > div > div *').fadeTo('slow', 0);

Пример, приведенный выше, я использую классы и идентификаторы в реальном коде.

Извините за трату времени

Джеймс