2.6. Свободно позиционируемые элементы

В этом параграфе рассматриваются свободно позиционируемые элементы, т.е. фрагменты, которые могут размещаться на веб-странице произвольным образом. До сих пор браузер автоматически размещал текст на странице, как правило, растягивая его на всю ширину окна. Исключением из этого были лишь таблицы, для которых можно было задать фиксированную ширину ячеек, но местоположением их также нельзя управлять вполне свободно – оно зависит от соседних ячеек таблицы. (Существуют также фреймы, но они в данном пособии не рассматриваются.) В общем случае, размерами элемента управляет браузер на основе размеров его соседей и родителя (все элементы вложены в тэг <body>). Для свободно позиционируемых элементов этого ограничения не существует – мы можем полностью управлять их размерами и местоположением. Они могут даже перекрывать друг друга.

2.6.1. Строчный фрагмент <div>

Тэг <div> действует сходно с <p> – задаёт строчный фрагмент текста, т.е. такой фрагмент, который автоматически разбивается браузером на строки в соответствии с заданными размерами и положением. От тэга <p> он отличается тем, что последовательность таких фрагментов не обязательно отображается в окне браузера непосредственно друг под другом; размеры и положение каждого из них можно задать индивидуально с помощью свойств стиля, перечисленных в следующем примере:

<div style="position: absolute; left: 50; top: 50; width: 200; height: 100;

background-color: lightgreen; overflow: scroll"> Это – строчный фрагмент!

</div>

Мы можем управлять следующими параметрами свободно позиционируемого элемента:

• координатами левого верхнего угла (свойства left, top);

• геометрическими размерами (width, height);

• слоем (уровнем), или z-индексом (z-index);

• видимостью или невидимостью (visible);

• поведением в случае, если содержимое элемента выйдет за его размеры (overflow);

• способом позиционирования – относительным или абсолютным (position).

О z-индексе следует сказать подробнее. Представим себе, что все свободно позиционируемые элементы «сложены» в своеобразную «стопку» и пронумерованы в порядке снизу вверх. При этом элементы с бо́льшими номерами перекрывают элементы с меньшими номерами. Этот номер в воображаемой «стопке» и есть z-индекс.

Способ позиционирования (атрибут position) определяет, откуда отсчитывается расстояние, указанное в свойствах top и left. Если его значение равно absolute, за начало координат принимается верхний левый угол документа; в противном случае – «текущая» позиция в документе, в которой был бы размещён очередной автоматически позиционируемый элемент.

По умолчанию свободно позиционируемый элемент растягивается по вертикали, если его содержимое в нём не помещается. Это поведение можно изменить, добавив определение overflow:scroll. В этом случае элемент превращается в своеобразную «страничку в странице», имеющую собственные полосы прокрутки.

Превратить автоматически размещаемый абзац в свободный элемент можно, заменив тэг <p> на <div> и указав необходимые свойства стиля.

Строчный фрагмент может включать в себя несколько абзацев, задаваемых тэгами <p> внутри него. В этом случае браузер размещает их автоматически внутри пространства, отведённого под строчный фрагмент.

2.6.2. Символьный фрагмент <span>

Символьный фрагмент <span> ведёт себя в основном так же, как и строчный фрагмент <div>, но не обязательно должен представлять собою абзац или несколько абзацев. Внутри него могут располагаться отдельные слова или даже буквы.

Пример. Поместим в символьный фрагмент одно слово и зададим ему позиционирование выше остальных слов в тексте на 5 пунктов:

Слово <span style="position: relative; top: -5pt">подскочило</span> в строке.

В браузере это отобразится так:

Слово ^{подскочило} в строке.