|
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 |
|
