Позиционирование


назад вперед

Позиционирование порой удивляет!

Задавайте элементы, которые должны быть на первом плане!

Элементы могут перекрываться!


Нормальный поток элементов

Перед ознакомлением с типами позиционирования я хотел бы познакомить вас с понятием "нормальный (обычный) поток элементов".

Нормальный поток элементов — это отображение элементов соответственно их месту в коде. То есть если в этом примере:

Пример

<h2>Это заголовок</h2>

<p>А это параграф</p>

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


Позиционирование

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

Элемент можно позиционировать, используя свойства top, bottom, left и right. Однако, эти свойства не будут действовать, если не указано свойство position. Действие этих свойств зависит от значения свойства position (тип позиционирования).

В CSS существуют четыре типа позиционирования.


Статическое позиционирование

Статическое позиционирование применяется к элементам по умолчанию. Статически позиционированный элемент занимает в разметке место соответсвенно своему положению в html-коде.

На статически позиционированный элемент не действуют свойства top, bottom, left и right.


Фиксированное позиционирование

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

Он не двигается при прокрутке страницы:

Пример

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Посмотреть

Заметка: Internet Explorer поддерживает фиксированное позиционирование только если указан !DOCTYPE.

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

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


Относительное позиционирование

Относительно позиционированные элементы занимают положение относительно своего нормального местоположения.

Пример

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Посмотреть

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

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


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

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

Пример

h2
{
position:absolute;
left:100px;
top:150px;
}

Посмотреть

Абсолютно позиционированные элементы освобождают свое нормальное местоположение следующим за ними элементам.

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


Перекрывание элементов

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

Свойство z-index определяет положение элемента в третьем измерении (какой элемент должен быть на переднем плане, какой на втором и так далее). z-index может иметь как положительные, так и отрицательные значения:

Пример

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

Посмотреть

Элемент, имеющий большее значение z-index, всегда находится над другими элементами (то есть элемент с z-index:2 будет перекрывать элемент с z-index:1).

Заметка: если два элемента не имеют z-index, при этом могут перекрыть друг друга, тогда на переднем плане будет отображаться тот элемент, который идет последним в html-коде.


Позиционирование элементов — справка CSS

Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
bottom Нижний отступ позиционированного элемента auto
размер
%
inherit
2
clip Размер отображаемой части элемента shape
auto
inherit
2
cursor Тип отображаемого курсора url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
left Левый отступ позиционированного элемена auto
Размер
%
inherit
2
overflow
Определяет что произойдет, если содержимое элемента не поместится в его границы auto
hidden
scroll
visible
inherit
2
position Тип позиционирования элемента absolute
fixed
relative
static
inherit
2
right Правый отступ позиционированного элемента auto
Размер
%
inherit
2
top Верхний отступ позиционированного элемента auto
Размер
%
inherit
2
z-index Положение элемента в третьем измерении число
auto
inherit
2


Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта