Одна позиция - не работает...

Все, кто изучал CSS, знают об относительном и абсолютном позиционировании объектов на странице. Зачастую дизайн сайта таков, что ширина основной таблицы, центрированной относительно окна бразуера, задана в пикселах. Это не так уж страшно, хотя и не кошерно. Проблемы начинаются, когда относительно этой таблицы мы пытаемся позиционировать дополнительные блоки с информацией, например, так:

<div style="position:absolute;left:664px;top:324px">
Блок "Наши контакты"
</div>

Всё дело в том, что позиционировать так единственный или некоторые блоки на странице не имеет никакого смысла - всё "поедет" при первой же смене разрешения экрана или изменении масштаба просмотра в браузере.

Если блок является блоком верхнего уровня страницы (прямым потомком элемента BODY) или же у блока, в который он вложен, не определено свойство position, то вложенный блок позиционируется просто относительно окна браузера, а значит, указанное расстояние в пикселах или процентах всегда относительно и "наши контакты" могут оказаться поверх совсем не той части страницы, что мы ожидаем.

Получается, позиционировать надо всё, начиная с основной таблицы шаблона. При этом, поскольку позицинирование делатся на основании свойств left и top (левого верхнего угла объекта) относительно позиции ближайшего позиционированного предка или, если такового нет, то относительно левого верхнего угла окна бразуера, мы теряем удобное и естественное выравнивание основной таблицы шаблона по центру.

Поэтому я порой для скорости и предпочитаю классику HTML - "порезать" таблицу на части и вставить эти самые контакты в одну из её ячеек :)

09.09.2010, 14:16 [9340 просмотров]