[позиционирование блоков в каскадных таблицах стилей]материал подготовил: Дмитрий Турецкий 08.04.2004
В принципе, всю разработку дизайна какого-то документа можно свести к двум шагам – определению внешнего вида элементов и их позиционированию. И если с расположением элементов никогда не было проблем в, скажем, типографии, то в веб-дизайне именно позиционирование является одной из наиболее сложных задач.
В полиграфии вам известны размеры “конечного устройства” – листа книги или газеты, размеры шрифтов и картинок, есть возможность жестко привязать каждый элемент к своему месту и так далее. В веб-дизайне же все наоборот – у посетителей сайта может быть разное разрешение экрана, они могут смотреть ваш сайт, развернув браузер на весь экран или свернув в относительно небольшое окошко, у них могут быть разные шрифты по умолчанию и разная глубина цвета; наконец, они могут отключить вывод, скажем, картинок – все это способно привести к весьма заметным искажениям вашей дизайнерской задумки…
О том, как задать внешний вид блока, мы говорили в прошлой статье, так что сегодня попробуем разобраться с их позиционированием. Когда браузер получает данные от сервера, он выводит их на страницу в том порядке, в котором получает – этот порядок называется нормальным потоком. То есть браузер получает какой-то элемент, вычисляет его размеры и располагает следом за предыдущим элементом. Кстати, именно с этим была связана задержка с отображением таблиц в ранних версиях браузеров – так как таблицы меняют свой размер в зависимости от содержания, нет возможности вычислить их размер на странице до получения всего содержимого, и по этой же причине стоит всегда указывать размер картинки в теге IMG – это даст возможность браузеру сразу “зарезервировать” необходимое для картинки место.
При обработке данных из нормального потока браузер выводит данные строку за строкой, добавляя перевод строки при появлении структурного блока. Поэтому, в частности, в стандартном HTML нет возможности организовать вывод, например, нескольких колонок текста, и веб-дизайнерам приходится использовать для этого таблицы.
Нормальный поток – это то, что написано в выводимом браузером документе
В CSS есть два способа позиционирования блока в нормальном потоке: relative и static. Static используется по умолчанию и выполняет стандартное форматирование, оставляя блок в нормальном потоке (или, говоря проще, ничего не делает). Relative позволяет сдвинуть положение блока относительно того положения, которое он занимал бы в нормальном потоке. использовать относительное смещение надо с осторожностью – сдвигается только тот блок, к которому относится определение, а остальные выводятся, как и должны – в результате этого “сдвинутый” блок легко может перекрыть другие элементы. Например, в тексте, приведенном ниже, используется стиль
position: relative; left: 20px; color: green;
Это просто текст, в котором одно слово сдвинуто на 20 пикселей.
Обратите внимание на инструкцию “left: 20px” – она сдвигает положение левого края блока на 20 пикселей относительно предыдущего элемента в нормальном потоке, в результате чего сам блок смещается вправо. Если указать отрицательное смещение, то блок сдвинется влево. Аналогично можно сдвигать блок по вертикали – для этого используется свойство top. Можно также использовать right и bottom, если требуется…
Относительное позиционирование имеет весьма ограниченное применение, хотя иногда может сослужить неплохую службу. Однако практика показывает, что как только вы попробуете сделать что-то более сложное, чем простой сдвиг блока, то быстро столкнетесь с тем, что разные браузеры весьма по-разному показывают результаты ваших трудо
