{overflow: hidden} и {position: relative} в IE

В IE абсолютно (position: absolute) или относительно (position: relative) позиционированные блоки имеют обыкновение игнорировать правило {overflow: hidden} содержащего их элемента и преспокойно выступать за пределы его границ.

Для решения этой проблемы достаточно задать относительное позиционирование (position: relative) самому контейнеру. Приведённый пример это иллюстрирует.

CSS:

/* дочерний элемент */
#child {background: #ссс; position: relative; top: -25px; }

/* содержащий его контейнер */
#parent {overflow: hidden; position: relative; height: 50px; }

HTML:

<div id="parent"><div id="child">example</div></div>

Комментарии

Паршуков Алексей 2008-09-18

только вот одним overflow: hidden; дело не ограничиваеться.
У IE вообще Много проблем с позиционирование. Напрмиер position: relative; плохо себя ведёт относительно документа, если менять размер окна или размер родительского элемента через js.

К счастью многие проблемы решаються вышеупомянутым способом.

Максим Покровский 2008-09-22

Очень много багов лечится position:relative;
Проблема только в шестерке или семерка тоже шалит?

Паршуков Алексей 2008-09-26

Я пока не нашёл положительных сдвигов в седьмой версии. Надеемся, что хотябы в IE8 ситуация кардинально поменяться.

tom 2008-12-23

Оу спасибо!!!! Я столько времени себе мозг Е…ал на эту тему!! Никак не мог нормально прописать!
Спасибо.