Позиционирование в CSS

Позиционирование в CSS

Спецификация CSS1 (стр. 40) была типичным «пожарным» решением, спешной попыткой залатать самые зияющие дыры HTML. Кроме возможности устанавливать поля вокруг объектов, никаких усовершен­ствований на тему позиционирования в этой версии еще не было. В CSS2, однако, разработчики стандарта подошли к делу гораздо серьезнее и реализовали логичный и все­объемлющий набор инструментов, позволяющий свободно размещать материал на плоскости страницы, сняв всякую необходимость пользоваться с этой целью таблицами.

Для начала давайте рассмотрим, чем вообще определяется положение на странице того или иного элемента документа (стр. 27). Язык CSS унаследовал от HTML идею разделения всех элементов, чье содержимое подлежит в той или иной форме выводу на экран, на строчные (inline) и блочные (block). Разница между ними состоит в том, что идущие подряд строчные элементы выстраиваются по горизонтали, переходя на новую строку, только если исчерпано горизонтальное пространство, тогда как блочные элементы располагаются вертикально друг под другом (можно сказать, что каждый блочный элемент начинает собой новый абзац).

Понятно, что и для строчных, и для блочных элементов положение на странице будет зависеть от количества и раз­меров всех предшествующих объектов того же класса. Кроме образования цепочек, объекты обычно выстраиваются еще и в иерархические структуры — так, цепочка строчных эле­ментов может находиться внутри блочного элемента (абзаца или таблицы). Таким образом, «в обычной жизни» коорди­наты элемента определяются двумя факторами: положением элемента-"родителя» и наличием «старших братьев», т. е. элементов, предшествующих данному и имеющих с ним общего родителя.

Теперь вам будет легко понять разницу между двумя основ­ными режимами позиционирования, введенными в CSS2: относительным (relative) и абсолютным (absolute). Относи­тельное позиционирование позволяет смещать объект от той точки, которую он занимал бы по умолчанию с учетом обоих упомянутых только что факторов. Относительное позиционирование отдельных букв в абзаце позволяет, например, воспроизвести логотип системы TEX, в котором буква «Е» cмещена вниз не относительно какой-то точки на странице, 1 относительно своих соседей. Такой логотип ведет себя как единый строчный элемент (в частности, он свободно перемещается при переверстке абзаца). Относительное сме­шение объекта не влияет на следующие объекты в цепочке; они ведут себя так, как если бы тот стоял на своем законном месте, — что может приводить, в частности, к наложению объектов друг на друга.

 









.