Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 19 Позиционирование


« Назад Далее »

Необычное расположение!

Решите, какой элемент отображать спереди!

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


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

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

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

Существует четыре различных метода позиционирования.


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

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

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


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

Элемент с фиксированным положением позиционирован относительно окна браузера.

Он не будет двигаться, даже если окно прокручивается:

Пример

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

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа !DOCTYPE.

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

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


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

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

Пример

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 коде будет показан сверху.


Примеры

Еще примеры

Установка формы элемента
Этот пример демонстрирует как задать форму элемента. Элемент обрезается по этой форме, а затем отображается.

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

Как заставить браузер автоматически управлять переполнением
Этот пример демонстрирует как заставить браузер автоматически управлять переполнением.

Изменение курсора
Этот пример демонстрирует как изменить курсор.


Все CSS Свойства Позиционирования

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

Свойство Описание Значения CSS
bottom Устанавливает нижнее поле для позиционируемого блока auto
расстояние
%
inherit
2
clip Обрезает абсолютно позиционированный элемент форма
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




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru