Веб-дизайн



              

Позиционирование в CSS - часть 2


Относительное позиционирование отдельных букв в абзаце позволяет, например, воспроизвести логотип системы TEX, в котором буква «Е» cмещена вниз не относительно какой-то точки на странице, 1 относительно своих соседей. Такой логотип ведет себя как единый строчный элемент (в частности, он свободно

241

перемещается при переверстке абзаца). Относительное сме­шение объекта не влияет на следующие объекты в цепочке; они ведут себя так, как если бы тот стоял на своем законном месте, — что может приводить, в частности, к наложению объектов друг на друга.

Разновидностью относительного является плавающее (float) позиционирование, при котором объект смещается относи­тельно исходного положения до упора вправо или влево, отодвигая в этом месте текст (а не накладываясь на него). В HTML того же эффекта для изображений можно достичь с помощью атрибута align тега IMG.

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

Разновидностью абсолютного является фиксированное (fixed) позиционирование, при котором элементом-«родителем» считается окно броузера. Это позволяет реализовать в CSS некоторое подобие фреймов (в том числе и с автоматически появляющимися полосами прокрутки), а также фоновые «водяные знаки», остающиеся неподвижными при прокрут­ке содержимого переднего плана.

Как относительное, так и абсолютное позиционирование могут приводить к наложению элементов друг на друга. По умолчанию видимым остается тот элемент, который выводится последним, т. е. стоит дальше всего от начала в исходном тексте HTML-документа.


Содержание  Назад  Вперед