31. Относительное позиционирование: позиционирование блоков и позиционирование текста. Теги. Примеры.

Если задать значение relative свойства position, то положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз  (рис. 3.46), отрицательное — сдвиг вверх.

Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо (рис. 3.47). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.

Для относительного позиционирования характерны следующие особенности.

• Этот тип позиционирования не применим к элементам таблицы вроде ячеек, строк, колонок и др.

• При смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами.

32. Фиксированные блоки. Статистическое позиционирование: свойства. Пример одного и двух плавающих блоков.

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.

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

Плавающие блоки чаще всего используются при блочной верстке сайта. Большинство современных сайтов как раз и используют данный тип верстки. Для задания положения плавающего блока в CSS используется свойство float

Свойство float

Это свойство определяет по какой стороне будет выровнен блок и будет ли он плавающим. Оно имеет следующие значения:

• right - выравнивает блок по правому краю, а остальные элементы будут обтекать его с левой стороны, начиная с самого верха;

• left - выравнивает блок по левому краю, а остальные элементы будут обтекать его с правой стороны, начиная с самого верха;

• none - это значение стоит по умолчанию, блок остаётся на месте;

• inherit - наследует значение у родительского блока.

Говоря о плавающих блоках следует затронуть такое свойство, как clear

Свойство clear

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

• right - отменяет обтекание структурного блока с правой стороны;

• left - вотменяет обтекание структурного блока с левой стороны;

• both - отменяет обтекание блока с двух сторон;

• none - отменяет действие данного свойства;

• inherit - наследует значение у родителя.

33. Фильтры: определение, назначение, формат. Статические фильтры (синтаксис, названия фильтра: Alpha, Blur, Chroma, DropShadow, FlipH, FlipV, Glow, Invert, Gray, Light, Mask, Shadow, Xray, Wave, BasicImage). Назначение. Примеры.

Устанавливает фильтр (визуальный эффект) или их сочетание для элемента. К фильтрам относится изменение прозрачности, добавление тени, трансформация и др.