... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Схемы позиционирования. Свойства POSITION (стр.1)

 

 

Позиционирование блоков ||  Нормальный поток ||  Свойства position ||  Фиксированные блоки ||  Плавающие блоки


Свойство POSITION

Рассмотрим свойство position, которое наряду со свойством float определяет схему позиционирования. Свойство position может принимать четыре значения, которые соответствуют основным схемам.
  1. static - блок будет считаться обычным и позиционироваться в соответствии с правилами нормального потока.
  2. relative - относительное позиционирование (относительно нормального потока).
  3. absolute - абсолютное позиционирование.
  4. fixed - фиксированное позиционирование. Блок позиционируется абсолютно, а потом его положение фиксируется относительно области просмотра - такой блок не перемещается при прокрутке.
Как вы понимаете, значение static, соответствующее нормальному потоку, используется по умолчанию. Подвидом нормального потока является относительное позиционирование. Рассмотрим его подробнее.

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

Чтобы создать относительно позиционированный блок, необходимо записать свойство position:relative. В этом случае положение блока сначала будет вычислено относительно нормального потока, а затем блок будет смещен относительно этого места. Следующие блоки будут располагаться так, как будто исходный блок находился в нормальном потоке и смещения не происходило.

Смещение задается с помощью следующих свойств:

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

Рассмотрим простой пример. Поместим на страницу три блока DIV.

DIV {
border:1px dotted #000;
}
<DIV>первый блок </DIV>
<DIV>второй блок </DIV>
<DIV>третий блок </DIV>

В окне браузера они будут размещены согласно правилам нормального потока, как показано на рисунке: ОТКРЫТЬ

Если сейчас изменить способ позиционирования одного из блоков, - скажем, сдвинуть его на 10 пикселей от верхнего края и на 20 пикселей от левого, то картина изменится. Для этого создадим класс move:

.move {
position:relative;
left:20px;
top:10px;
}
<DIV>первый блок </DIV>
<DIV class="move">второй блок </DIV>
<DIV>третий блок </DIV>

Теперь второй блок будет указанным образом позиционирован относительно своего прежнего положения в потоке ОТКРЫТЬ. На рисунке четко видно, что положение первого и третьего блоков не изменилось. Они по-прежнему расположены так, как будто второй блок остался на месте и никуда не был сдвинут. Таким образом, мы на практике получили подтверждение правилу, что относительное позиционирование не влияет на другие блоки, - сдвиг осуществляется только для самого относительно позиционируемого блока.

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

 

Позиционирование блоков ||  Нормальный поток ||  Свойства position ||  Фиксированные блоки ||  Плавающие блоки

 

Страница: - 1 - | - 2 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены