заработок вебмастеру

Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

четверг, 2 июля 2009 г.

Проблемы с абсолютным позиционированием в MSIE6

На практике приходится постоянно сталкиваться с двумя багами абсолютного позиционирования в IE6. Обе проблемы вызваны свойством position:relative у родительского блока (когда мы хотим абсолютно позиционировать блок относительно этого родителя а не документа).

Проблема номер один — когда рядом с родительским блоком находится какой то блок с position:relative и как не выставляй z-index абсолютно позиционированному блоку, он никак не отобразится по верх него. проблема решается установкой z-index родителю (если соседний с родителем блок имеет такие же стили, то z-index у них должен отличатся), ну и стараться использовать position:relative только когда оно действительно нужно. Проблема состоит в том что ИЕ сравнивает не только z-index блоков, но и z-index их родителей и их последовательность. И родительский считается им важнее. То есть если есть два блока с position reletive и z-index 10, и у одного из них есть вложенный блок c position absolute и z-index 20, то отображаться поверх другого блока он будет только в том случае если родительский блок находится в коде позже. Если же на оборот то поверх абсолютно позиционированного блока будет отображаться блок который идёт позже, хоть у него и такой же z-index как у родителя.
Я всегда стараюсь обходит стороной, если надо выводить кучу элементов у которой при каком-то событии должен появляться абсолютно позиционированный относительно елемента блок, то родителю назначаю position:relative тоже по событию.Как я уже говорил "ну и стараться использовать position:relative только когда оно действительно нужно", а то я иногда встречал записи такого вида *{position:relative}

Вторая проблема, это когда у родительского блока стоит обтекание (float:left; или float: right), тогда с абсолютно позиционированным блоком происходит не понятная вещь - или он вообще пропадает из виду (наверное его выкидывает за пределы окна) или он позиционируется относительно всего документа. С этим багом я боролся разными методами (куча игр с hasLayout) но решение найденyое методом тыка clear:both меня очень удивило. Но самое главное &mdash это работает.

Удачи в борьбе с MSIE

2 комментария:

alexpts комментирует...

Натыкался на эту проблему, потратил очень много времени на ее решение... ПРичем в IE отображалось нормально (полезные баги тоже есть(: ). Только вот мне помогла не разница z-index, а назначение отрицательного z-index.

Портретов А. комментирует...

Вот с "приколом" столкнулся при абсолютном позиционировании в IE6. Обернул нужный блок с position:absolute во внешний блок с position:relative, как и учили. В IE6 блок выезжал далеко за пределы внешнего блока. Оказалось(спасибо добрым людям), что обязательно внешнему блоку нужно указать свойство width.