Позиционирование - CSS свойства

Краткое описание свойств

position

Определяет способ задания положения элемента.

top

Смещение верхней границы элемента.

bottom

Смещение нижней границы элемента.

left

Смещение левой границы элемента.

right

Смещение правой границы элемента.

float

Определяет обтекание элемента другими.

clear

Запрещает обтекать другие элементы.

display

Определяет формат элемента в структуре страницы.

visibility

Определяет видимость элемента.

overflow

Определяет способ отображения содержимого, которое не помещается в блоке.

overflow-x

Определяет способ отображения содержимого, которое не помещается по ширине.

overflow-y

Определяет способ отображения содержимого, которое не помещается по высоте.

vertical-align

Определяет вертикальное выравнивание строчных элементов внутри данного.

z-index

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

Свойство position

Устанавливает способ задания положения элемента. От него зависит, относительно чего будут отсчитываться значения свойств top, bottom, left и right.

Краткая информация

Значения

• fixed - положение элемента задаётся относительно конкретной точки на экране и зафиксировано. При прокручивании страницы элемент остаётся на месте. Значения свойств top, bottom, left и right отсчитываются относительно границ экрана.
• absolute - положение элемента задаётся относительно родительского элемента (при этом свойство position родительского элемента должно иметь значение fixed, absolute или relative). Свойства top, bottom, left и right берутся относительно границ родительского элемента. Остальные элементы страницы выводятся так, будто данного элемента не существует.
• relative - положение элемента задаётся относительно того места, где он должен располагаться. Значения свойств top, bottom, left и right задают смещение элемента от нормального положения.
• static - элемент отображается на своем месте. Свойства top, bottom, left и right не применяются к элементу.

Свойство top

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

Краткая информация

Свойство bottom

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

Краткая информация

Свойство left

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

Краткая информация

Свойство right

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

Краткая информация

Свойство float

Определяет обтекание данного элемента другими слева или справа.

Краткая информация

Значения

• none - отменяет обтекание элемента. Установлен по умолчанию.
• left - выравнивает элемент по левому краю. Обтекание происходит справа от элемента.
• right - выравнивает элемент по правому краю. Обтекание происходит слева от элемента.

Свойство clear

Запрещает данному элементу обтекать другие.

Краткая информация

Значения

• none - отменяет действие свойства clear.
• left - запрещает элементу обтекать по левой границе.
• right - запрещает элементу обтекать по правой границе.
• both - запрещает обтекать с обеих сторон.

Свойство display

Определяет, как будет представляться элемент в структуре документа.

Краткая информация

Значения

• none - элемент не отображается на странице.
• block - элемент представляется как блочный. Для такого элемента появляется возможность свободного позиционирования и изменения размеров.
• inline - элемент представляется как строчный. Встраивается в общий текст и оформляется как часть этого текста.
• inline-block - элемент представляется как строчный. Встраивается в общий текст, возможность позиционирования отсутствует. Остальные свойства применяются, как для блочных тегов.
• list-item - элемент представляется как блочный. Перед данным элементом добавляется маркер списка, как для тега <li>.

Свойство visibility

Определяет видимость элемента.

Краткая информация

Значения

• visible - элемент виден пользователю.
• hidden - элемент не виден (т.е. полностью прозрачен). При этом место, где должен располагаться объект, остаётся пустым. Чтобы этого избежать, нужно использовать свойство display:none.
• collapse - удаляет строку или столбец таблицы.

Свойство overflow

Определяет, как отображать содержимое, которое не помещается в блоке.

Краткая информация

Значения

• auto - если элемент не помещается в блоке, только тогда добавляются полосы прокрутки.
• scroll - полосы прокрутки добавляются вне зависимости от того, помещается содержимое или нет.
• visible - заставляет объект расшириться так, чтобы все содержимое поместилось.
• hidden - все, что не помещается в блоке, не отображается. Полосы прокрутки не добавляются.

Свойство overflow-x

Аналогично overflow, но только для случая, когда содержимое не помещается по ширине.

Краткая информация

Свойство overflow-y

Аналогично overflow, но только для случая, когда содержимое не помещается по высоте.

Краткая информация

Свойство vertical-align

Задаёт вертикальное выравнивание элемента внутри родительского.

Краткая информация

Значения

• top - выравнивает верх элемента по верхнему краю родительского элемента.
• middle - выравнивает центр элемента по центру родителя.
• bottom - выравнивает низ элемента по нижнему краю родительского элемента.

Свойство z-index

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

Краткая информация