Проблемы с абсолютным позиционированием в 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
... а что дальше?

Вложеные float элементы

Очень часто, у тех, кто раньше верстал таблицами и стал переходить на блоки (я больше люблю называть слоями) появлялась такая проблема, когда элемент содержащий float-элементы схлопывается. Например нам надо организовать горизонтальное меню центрированное по центру ввиде списка.
У меню есть фон (background-color) и поля (padding), у элементов списка есть свой фон и отступы (margin). Давайте посмотрим вертикальное меню:

• Главная
• Контакты
• Карта сайта

исходный код:

<style type="text/css">
div.preview{
    background:#fff;
    border:1px #000  solid;
    width:600px
 }
ul.menu{
    list-style-type:none;
    background:#f00;
    padding:10px 5px;
    border:1px #000 dotted;
    width:400px;
    margin:10px auto;
}
ul.menu li{
    margin:0 5px;
}
ul.menu li a{
    display:block;
    background:#000;
    padding:2px;
 }
</style>
<div class="preview01">
 <ul class="menu02">
  <li><a href="http://ya.ru">Главная</a></li>
  <li><a href="http://google.com">Контакты</a></li>
  <li><a href="http://www.blogger.com/">Карта сайта</a></li>
 </ul>
</div>

Для того, чтобы пункты, выстроились горизонтально, нам надо поставить ul.menu02 li{float:left;} смотри, что получилось:

• Главная
• Контакты
• Карта сайта

Наш блок, содержащий плавающие пункт списка, схлопнулся, как будь-то пустой, и не содержит элементов. Это происходит из-за того, что блочный элемент теряет layout, говоря по русски пропадает слой(некоторые элементы не имеют layout от "рождения").

Layout можно вернуть несколькими способами:

1. Задать высоту — атрибут height. (не подходит, ведь высота иногда может быть не постоянна)
2. Задать выравнивание — атрибут float. (в нашем примере пропадет отцентровка)
3. Задать обрезание содержимого при переполнении &madsh; overflow:hidden. (вот это уже можно попробывать)
   • Главная
   • Контакты
   • Карта сайта
   
   исходный код:
   

   <style type="text/css">
   div.preview{
       background:#fff;
       border:1px #000  solid;
       width:600px
    }
   ul.menu{
       list-style-type:none;
       background:#f00;
       padding:10px 5px;
       border:1px #000 dotted;
       width:400px;
       margin:10px auto;
       overflow:hidden;
   }
   ul.menu li{
       margin:0 5px;
   }
   ul.menu li a{
       display:block;
       background:#000;
       padding:2px;
    }
   </style>
   <div class="preview01">
    <ul class="menu02">
     <li><a href="http://ya.ru">Главная</a></li>
     <li><a href="http://google.com">Контакты</a></li>
     <li><a href="http://www.blogger.com/">Карта сайта</a></li>
    </ul>
   </div>

   
   
   В IE6 как всегда не работает, но вспоминая его поведение при обработке блока с заданой высотой, можно использовать хак:
   

   * html ul.menu{
       height:1%;
   }
   

4. Используя хак для ИЕ из предыдущего пункта, можно написать еще такое:
   

   ul.menu{
       height:auto;
       min-height:2px;
       _height:2px; /*хак для ИЕ, минус — несоответствует стандартам, лучше как вредыдущем пункте, записать отдельно */
   }

   
   
   

Это не единственные методы, наверное есть ещё. Эксперементируйте, и выбирайте свой любимый метод задания layout.
... а что дальше?