|
CSS свойства
позиционирования позволяют вам позиционировать элемент. Также они могут
расположить элемент позади другого, и указать, что должно произойти, когда
содержимое элемента слишком большое.
Элементы могут
располагаться, используя свойства top (сверху), bottom (снизу), left (слева),
и right (справа). Однако, эти свойства не будут работать, пока не
установлено свойство position. Также они работают по-разному, в зависимости
от метода позиционирования.
Существует
четыре различных метода позиционирования.
Статическое
позиционирование
HTML элементы
позиционируются статически по умолчанию. Статически позиционированный
элемент всегда располагается в соответствии со стандартным потоком элементов
на странице.
Статически
расположенные элементы не подвергаются воздействию свойств top, bottom,
left, и right.
Фиксированное
позиционирование
Элемент с
фиксированным положением позиционирован относительно окна браузера.
Он не будет
двигаться, даже если окно прокручивается:
Пример:
p.pos_fixed
{
position:fixed;
top:60px;
right:5px;
}
нажмите чтобы увидеть результат
Фиксированно
расположенные элементы удаляются из нормального потока. Документ и другие
элементы ведут себя так, будто фиксированно расположенный элемент не
существует.
Зафиксированные
элементы могут перекрывать другие элементы.
Относительное
позиционирование
Относительно
позиционированный элемент располагается относительно по отношению к его
обычной позиции.
Пример:
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
нажмите чтобы увидеть результат
Содержание
относительно позиционированных элементов может быть сдвинуто и перекрываться
с остальными элементами, однако зарезервированное пространство для элемента
по прежнему остается в обычном потоке элементов.
Пример:
h2.pos_top
{
position:relative;
top:-50px;
}
нажмите чтобы увидеть результат
Относительно
позиционированные элементы часто используются в качестве контейнеров для
абсолютно позиционированных элементов.
Абсолютное
позиционирование
Абсолютно
позиционированный элемент располагается относительно первого родительского
элемента, который позиционирован иначе, чем статически. Если такого элемента
не найдено, за родительский элемент принимается <html>:
Пример:
h2
{
position:absolute;
left:100px;
top:150px;
}
нажмите чтобы увидеть результат
Абсолютно
позиционированные элементы удаляются из стандартного потока элементов.
Документ и другие элементы ведут себя так, будто абсолютно позиционированный
элемент не существует.
Абсолютно
расположенные элементы могут перекрывать другие элементы.
Перекрытие
элементов
Когда элементы
расположены вне стандартного потока, они могут перекрывать другие элементы.
Свойство z-index
указывает вертикальный порядок элемента (какой элемент должен быть помещен
спереди, или сзади других элементов).
Элемент может
иметь положительный или отрицательный вертикальный порядок:
Пример:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
нажмите чтобы увидеть результат
Элемент с
большим вертикальным порядком всегда находится впереди элементы с меньшим
вертикальным порядком.
Замечание: Если два позиционированных элементы перекрываются и не
указан вертикальный порядок, элемент расположенный позже в HTML коде будет
показан сверху.
|