Позиционирование элементов

Кроме параметров Настройки Отображения (Display) и Авто-расположение (Auto Layout) для установки положения элементов на странице также используются настройки Позиционирования (Position). 

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

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

Для настройки параметров нужно:

Существуют следующие типы позиционирования:

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

Атрибуты позиционирования (сверху, слева, снизу или справа) для таких элементов не работают.

Элемент позиционируется относительно своего исходного положения.

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

Пример использование относительного позиционирования: сдвиг элемента с наложением его на другой элемент.



Элемент позиционируется относительно родительского элемента, у которого задано нестатическое позиционирование.

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

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

Примеры использования абсолютного позиционирования:

Фиксация позиции элемента, которая не будет меняться при прокрутке страницы. Фиксированные элементы позиционируются относительно окна браузера.

Для фиксации элемента нужно указать атрибуты позиционирования (сверху, слева, снизу или справа). 

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

Примеры использования фиксированного позиционирования: 

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

Липкий элемент располагается в потоке элементов до тех пор, пока не будет достигнуто определенное положение прокрутки. В этот момент он переключается на поведение фиксированного элемента внутри своего родителя. Как только липкий элемент коснется нижней части своего родителя, он прекратит прокрутку.

Для липкого позиционирования нужно обязательно указать по крайней мере одно значение положения (сверху, слева, снизу или справа). Фиксация положения может работать некорректно, если какой-либо родительский элемент имеет заданную высоту или переполнение (Overflow), отличное от Видимый (Visible).

Пример использование фиксированного позиционирования: создание эффектов пролистывания.

Обычно достаточно указать одно значение атрибутов позиционирования по горизонтали и одно по вертикали. Значения задаются в пикселях и могут быть как положительными, так и отрицательными.

Пример:

При указании всех четырех значений равных 0 — элемент растягивается на всю ширину и высоту родительского элемента.

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

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

Одни элементы могут перекрывать другие элементы в естественном потоке. Чтобы изменить порядок наложения элемента по умолчанию, можно изменить у него значение Z-индекса. 

Значения Z-индекса

Элементы с более высоким значением отображаются поверх элементов с более низким. 

Вы можете выбрать значение Z-индекса из выпадающего списка: от -1 до 100.

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

Z-индекс для вложенных элементов

Когда для Z-индекса задано значение auto, порядок наложения элемента равен порядку наложения его родительского элемента. Например, дочерний элемент никогда не может быть выше родительского элемента, независимо от того, насколько велико значение его z-индекса.