Абсолютное позиционирование

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью»

Для режима характерны следующие особенности.

Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.

Слой не меняет своё исходное положение, если у него нет свойств right, left, top и bottom.

Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.

Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top, только слой уйдёт за верхний край.

Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top, только речь пойдёт о вертикальной полосе прокрутки.

Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top, bottom и height.

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

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto. Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left, right для ширины и top, bottom для высоты

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

Плавающая модель

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

Плавающие элементы достаточно активно применяются при вёрстке веб-страниц и служат для реализации этих и не только задач:

- обтекание картинок текстом;

- создание врезок;

- горизонтальные меню;

- колонки.

Обтекание происходит с помощью стилевого свойства float со значением left или right. По умолчанию обтекание для элементов не устанавливается, но если это по каким-либо причинам необходимо указать явно, следует использовать значение none.

Обтекание элемента

Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон.

Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.

Значения свойства float:

left - Выравнивает элемент по левому краю, остальные элементы обтекают его справа.

right - Выравнивает элемент по правому краю, остальные элементы обтекают его слева.

none - Выравнивание элемента не задается. (по умолчанию)

Запрет обтекания

Свойство clear запрещает обтекание элемента с левой и/или правой стороны. Если для элемента установлено обтекание с помощью свойства float то clear отменяет обтекание данного элемента с указанных сторон.

Значения:

both - Запрещает обтекание элемента с левой и правой стороны.

left - Запрещает обтекание элемента с левой стороны.

right - Запрещает обтекание элемента с правой стороны.

none - Запрет на обтекание элемента не задается.(по умолчанию)

 

Слои

Если представить веб-страницу в виде трёхмерного пространства, то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

В CSS за положением по Z-оси отвечает свойство z-index, которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index: 1 заставит элемент перекрывать все нижележащие.

Свойство z-index работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index, например 9999. Это гарантирует, что даже если в стилях и применяется z-index, он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс:hover.

Изменение курсора

Свойство CSS cursor позволяет установить нестандартный вид курсора для того или иного элемента - блока, текста, рисунка.. то есть когда пользователь наведет курсор на такой элемент он, курсор то бишь, поменяет свой вид.

Курсоры можно выбирать как стандартные, так и подгружать свои собственные пользовательские курсоры - файлы в формате cur, ani или svg.

Теперь по порядку..

Стандартные курсоры.

Вы наверняка обратили внимание на то, что по умолчанию, на странице, курсор приобретает вид в зависимости от специфики элемента, на который он нацелен, например если навести курсор на ссылку он отображается в виде указателя обычно "руки", если на некий текст, то курсор становится вида "работа с текстом", а если просто елозить по пустому месту на странице, то курсор имеет обыкновенный вид "стрелка".

Так вот, для того чтобы изменить внешний вид курсора свойству cursor необходимо указать одно из возможных значений:

auto - курсор назначается автоматически в зависимости от специфики элемента.(по умолчанию)

crosshair - перекрестие

default - встроенный(основной)

e-resize - стрелка на "восток"

hand - указатель аналогия pointer

help - помощь

move - перемещение

n-resize - переместить на "север"

ne-resize - переместить на "северо-восток"

nw-resize - переместить на "северо-запад"

pointer - указатель

progress - продолжение операции

s-resize - переместить на "юг"

se-resize - переместить на "юго-восток"

sw-resize - переместить на "юго-запад"

text - текст

w-resize - переместить на "запад"

wait - ожидание

Кроме того некоторые браузеры поддерживают дополнительные формы курсоров:

all-scroll - переместить во все стороны

col-resize - переместить по горизонтали

no-drop - указатель "нет доступа"

not-allowed - нет доступа

row-resize - переместить по вертикали

vertical-text - вертикальный текст

Следует понимать, что данные значения являются, не каким либо конкретным изображением курсора, а определяют тип курсора. Внешний вид курсора зависит от настроек операционной системы пользователя.

Пользовательские курсоры.

Для того чтобы курсор приобрёл нестандартный вид его необходимо подгрузить присвоив свойству cursor значение: url("путь к курсору").

Например:div { cursor: url("my.cur"); }

Так же можно указать несколько пользовательских курсоров, через запятую, в этом случае браузер будет пытаться отобразить первый из перечисленных, если у него это не получится, возьмется за второй.. и т. д. А не получится может из-за того, что браузер не поддерживает определённый формат файла-курсора. Как уже говорилось выше можно использовать файлы в формате cur, ani или svg - такие курсоры поддерживаются.

Поэтому список курсоров составляют из файлов разных форматов.. например, так:

div { cursor: url("my.cur"), url("my.svg"); }

И уж что б совсем обезопасить себя в конце списка рекомендуется ставить один из курсоров из стандартного набора.

Вот так: div { cursor: url("my.cur"), url("my.svg"), help; }

 

Свойство cursor, имеет еще одно значение - inherit. которое говорит о том, что свойство наследуется от элемента-родителя.