- static
- relative
- absolute
- fixed
- inherit
position:static
Из раздела 9 Модель визуального форматирования:Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства 'top', 'right', 'bottom' и 'left' не применяются.На что следует обратить внимание в этом примере:
- Второй блок отображается там же, где бы он отображался без определения position
- Значения задаваемые для top не используются, поскольку для блоков с 'static' значение всех смещений всегда 'auto'
- Если свойство элемента position имеет значение static, то элементу нельзя указать его расположение.
- Так как static это значение по умолчанию, то нет необходимости указывать это значение, если только оно не переопределяет другое значение позиционирования блока.
position:relative
Из раздела 9 Модель визуального форматирования:Положение блока рассчитывается в соответствии с нормальным потоком (это называется позиционированием в нормальном потоке). Затем блок смещается относительно своего нормального положения. Когда для расположения блока используется модель относительного позиционирования, то положение следующего рассчитывается так, как будто первый блок не был смещён относительно своего нормального положения.На что следует обратить внимание в этом примере:
- Блок 'два' смещён ниже на 300 пикселей, но блок 'три' и его содержимое остались на месте. Выглядит как будто содержимое блок 'два' съехало со страницы, оставив свой след. Это выглядит так, потому что 'relative' (относительное) позиционирование не нарушает нормальный поток.
- Блок с относительным позиционированием накладывается на следующие элементы и отображается перед другими блоками.
- Вычисленные значения всегда left = -right и top = -bottom. Если контейнер блока имеет значение direction равное ltr, то используется значение 'left', а 'right' = -left. Если direction контейнера блока имеет значение равное rtl, то используется значение 'right', а 'left' игнорируется.
- В отличии от 'absolute' (абсолютной) модели, свойства top, right, bottom и left ни могут растянуть или сжать блок, они не могут влиять на его размер.
position:absolute
Из раздела 9 Модель визуального форматирования:Положение блока (можно и размер) указываются с помощью свойств 'top', 'right', 'bottom', и 'left'. Они указывают смещение относительно содержащего блока. Абсолютно позиционируемые блоки изымаются из нормального потока и не влияют на размещение следующих элементов потока. Следует заметить, что поля блоков с абсолютным позиционированием не перекрываются ни какими другими полями.На что следует обратить внимание в этом примере:
- В связи с тем, что смещение не указано, блок 'два' не перемещён относительно своей нормальной позиции, но если бы мы использовали, например: top:0;left:0; блок находился бы в левом верхнем углу окна просмотра.
- Макет отображается так, как если бы блоку 'два' присвоили стиль: display:none. Блок был удалён из потока.
- С блоком 'два' удалённым из поток, блок 'три' переместился вслед за блоком 'один' (параграфы последовали за ним).
- Как и все элементы удалённые из потока, блок 'два' был сжат по горизонтали.
- Для любого элемента с позиционированием 'absolute' или 'fixed' вычисляемое значение display:block.
- 'Содержащий блок' это блок который определяет позиционирование контекста. Оно устанавливается ближайшим предком с 'position' установленной в 'absolute', 'relative' или 'fixed'. Это означает, что родительский блок может и не быть содержащим блоком.
- Положение по умолчанию, абсолютно позиционируемого блока, не всегда бывает в стиле top:0;left:0; (в LTR контексте), на это есть две причины:
- В содержащем блоке позиционирование блока определяется позиционированием ближайшего предка, если такового нет, то указанный контейнер является корневым элементом. Содержащий блок в котором расположен корневой элемент это прямоугольная область называемая начальным содержащим блоком. Для устройств без разбивки страниц он имеет размер области просмотра(окна или другой области просмотра на экране) и он прикреплён к странице. В этом примере показан блок позиционируемый относительно видимой области (по умолчанию, содержащий блок).
- Элемент позиционируемый относительно отступов блока, а не содержимого блока и не бордюра содержащего блока. Этот новый пример демонстрирует где находился бы блок 'два' если бы границы отступа блока не касались границы содержимого блока (содержащий блок - элемент body).
- Размер окна может быть определён значениями свойств: top, right, bottom и left. Например обнуление этих свойств сделает блок растянутым по размеру видимой области. Обнуление всех смещений блока (Примечание: в IE6 блок не растянется)
- Для создания маски наложения, которая не прокручивается вместе с документом (как в предыдущем примере) можно использовать либо fixed фиксированное позиционирование вместо absolute абсолютного, либо установить стиль body в position:relative как начального блока позиционирования области просмотра (стиль элемента html не работает в IE). Пример наложения.
- position:absolute запускает haslayout.
- Использование этой схемы позиционирования является плохой практикой, так как она удаляет блоки из потока.
position:fixed
Из раздела 9 Модель визуального форматирования":Фиксированное позиционирование является под категорией абсолютного позиционирования. Разница в том, что при фиксированном положении блока, содержащий блок определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это удобно для размещения подписей внизу каждой страницы. Блоки, которые больше чем область страницы обрезаются. Части блока с фиксированным позиционированием, которые не видны в начальном содержащем блоке, не будут напечатаны.
На что следует обратить внимание в примере:
- В связи с тем, что фиксированное позиционирование является под категорией абсолютного позиционирования, то всё, что было верно для 'absolute', так же верно и для 'fixed' (элемент сжимается по горизонтали, удаляется из потока и т.д.)
- Блок позиционируется относительно видимой области и не прокручивается вместе со страницей.
- В IE6, блок отображается как 'static' блок, но есть "забавный" обходной путь для этого.
- При печати документа, блок 'два' отобразится на каждой странице.
- Положение блока рассчитывается в соответствии с 'absolute' моделью, но кроме этого блок фиксируется относительно некоторой ссылки. В случае использования следующих медиа типов: handled, projection, screen, tty и tv блок фиксируется относительно видимой области и не перемещается при прокрутке.
- Содержание блока может быть не доступным для просмотра пользователями, если оно находится за пределами видимой области.
- В случае использования медиа типа 'print', авторы могут не хотеть что бы элемент отображался на каждой странице. Тогда лучше использовать следующие правили для @media:
@media print {
#logo {position: static;}
}
position:inherit
Если для блока указан position:inherit, то он будет принимать такие же вычисленные значения свойств как и его родительский блок.Обратите внимание, что IE6 и IE7 не поддерживают это значение, кроме тех случаев когда используется direction и visibility (см CSS: Значение свойства: inherit)
Что следует помнить:
Смещение блокаПомните, что при абсолютном и фиксированном позиционировании блоков, значения установленные в процентах для top, right, bottom и left вычисляются в соответствии с размерами содержащего блока (который может быть не родительским блоком)
'position' и 'overflow'
Блок со стилем overflow:hidden будет обрезать элементы с относительным позиционированием (вложенные блоки), но никогда не будет скрывать блоки с абсолютным позиционированием. Это связано с тем, что родительский блок не всегда является содержащим блоком (ближайшего предка с 'position' установленной в 'absolute', 'relative' и 'fixed').
Это означает, что элементы с абсолютным позиционирование отобразятся вне блока со стилем overflow:hidden если этот блок не является содержащим блоком или внутренним элементом указанного блока. Данный пример показывает как это работает.
Поля
Авторы могут использовать поля элементов вне зависимости от схемы их позиционирования.
В случае с IE
В IE позиционирование блока может быть благословением или проклятием:
- В IE6, position:relative (с haslayout) могут быть использованы отрицательные поля для предотвращения обрезания блока родительским контейнером (пример демонстрирующий решение этой проблемы).
- Позиционированный элемент может "мешать" расположению блоков в IE6 и 7 и может создавать наложение содержимого (пример)
- В соответствии с последовательностью исходного кода, позиционированные блоки могут выплывать перед блоками расположенными в нормальном потоке.
- Авторы могут указывать уровень наложения через свойство 'z-index', только на позиционированные блоки.
- В IE6 и 7, просто факт позиционирования может вызывать наложение контента (пример см. выше).
Элемент с относительной позицией всегда смещён относительно своего нормального положения в потоке. Другими словами, он смещён относительно того места где был бы при нормальных обстоятельствах и его смещение не влияет на положение элементов расположенных вокруг него. Это как призрак, который покинул своё тело. Тело, которое имеет ширину, высоту и оказывает влияние на окружение, но невидимо. Призрачные блоки в могут перемещаться, но всё ещё связаны со своим телом и его позиция по прежнему измеряется от него. Теперь элемент с абсолютным позиционированием, с ним ещё проще. Он больше не влияет на своё окружение (он вырван из потока). Он как настоящий призрак без тела. Что касается, родственных элементов, то он их больше не беспокоит, как если бы его не существовало. Что бы узнать свое положение он просматривает каждого предка пока не найдёт элемент с position:relative [position:fixed] или position:absoluter. Этот элемент будет служить точкой отсчёта. Если он не найдёт элемент с позиционированием, то будет ориентироваться относительно документа.
Комментариев нет:
Отправить комментарий