Поиск

Схемы позиционирования

В CSS2 блок может размещаться согласно трем схемам позиционирования:

  1. Нормальный поток. В CSS2 модель нормального потока включает форматирование блока структурного уровня, строковое форматирование строковых блоков, относительное позиционирование структурных или строковых блоков, а также позиционирование компактных и инициальных блоков.
  2. Перемещаемые объекты. Согласно этой модели блок сначала размещается в соответствии с нормальным потоком, а затем изымается из него и перемещаются максимально влево или вправо насколько это возможно. Отображаемое содержимое может располагаться по сторонам перемещаемого элемента.
  3. Абсолютное позиционирование. В модели абсолютного позиционирования блок полностью удаляется из нормального потока (и не влияет на последующие сестринские элементы), а затем ему назначается положение относительно контейнера.
  4. Примечание. Схемы позиционирования, разработанные в CSS2, помогают разработчикам делать свои документы более доступными, избавляя разработчиков от необходимости использовать различные приемы разметки (например, невидимые изображения) для управления отображением документа.
    Выбор схемы позиционирования: свойство 'position'

    Свойства 'position' и 'float' определяют алгоритм позиционирования CSS2, используемый для определения положения блока.

    'position'

    Значение: static | relative | absolute | fixed | inherit
    Начальное значение: static
    Область применения: все элементы, кроме генерируемого содержимого
    Наследование: нет
    Процентное задание: N/A
    Устройства: визуального форматирования

    Значения этого свойства:

    static

    Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства 'left' и 'top' не применяются.

    relative

    Положение блока рассчитывается в соответствии с нормальным потоком (оно называется нормальным положением). Затем блок смещается относительно своего нормального положения. Когда для расположения блока B используется модель относительного позиционирования, тогда положение следующего блока рассчитывается так, как будто блок B не был смещен.

    absolute

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

    fixed

    Положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта. При использовании устройств без разбивки блок фиксируется относительно области просмотра (и не перемещается при прокрутке). При использовании устройств с постраничной разбивкой блок фиксируется относительно страницы, даже если она отображается в области просмотра (например, при предварительном просмотре печати). У разработчиков существует возможность сделать определение значения 'fixed' аппаратно-зависимым. Например, разработчик может сделать так, чтобы на экране блок всегда отображался в верхней части области просмотра, но не печатной страницы этого бы не происходило. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано ниже:


    @media screen {
    H1#first { position: fixed }
    }
    @media print {
    H1#first { position: static }
    }
    Смещение блоков: 'top', 'right', 'bottom', 'left'

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

    'top'

    Значение: <длина> | <проценты> | auto | наследуемое
    Начальное значение: auto
    Область применения: позиционируемые элементы
    Наследование: нет
    Процентное задание: относительно высоты контейнера
    Устройства: визуального форматирования

    Это свойство задает смещение верхнего сегмента внутренней краевой линии относительно верхнего сегмента краевой линии контейнера блока.

    'right'

    Значение: <длина> | <проценты> | auto | наследуемое
    Начальное значение: auto
    Область применения: позиционируемые элементы
    Наследование: нет
    Процентное задание: относительно к ширины контейнера
    Устройства: визуального форматирования

    Это свойство задает смещение правого сегмента внутренней краевой линии влево относительно правого сегмента краевой линии контейнера блока.

    'bottom'

    Значение: <длина> | <проценты> | auto | наследуемое
    Начальное значение: auto
    Область применения: позиционируемые элементы
    Наследование: нет
    Процентное задание: относительно высоты контейнера
    Устройства: визуального форматирования

    Это свойство определяет смещение нижнего сегмента внутренней краевой линии вверх относительно нижнего сегмента краевой линии контейнера блока.

    'left'

    Значение: <длина> | <проценты> | auto | наследуемое
    Начальное значение: auto
    Область применения: позиционируемые элементы
    Наследование: нет
    Процентное задание: относительно ширины контейнера
    Устройства: визуального форматирования

    Это свойство определяет смещение левого сегмента внутренней краевой линии вправо относительно левого сегмента краевой линии контейнера блока.

    Значения этих четырех свойств имеют следующий смысл:

    <длина>

    Смещение задается фиксированным значением расстояния от исходной краевой линии.

    <проценты>

    Смещение задается процентным соотношением относительно ширины (для свойств 'left' и 'right') или высоты (для свойств 'top' и 'bottom') контейнера. Если высота контейнера не указана точно (т.е. зависит от высоты содержимого), то процентное соотношение, определяющее значение свойств 'top' и 'bottom', интерпретируется как значение 'auto'.

    auto

    Действие данного значения зависит от того, какие из свойств, близких по своему содержанию к рассматриваемым, также имеют значение 'auto'. Подробную информацию можно найти в разделах, посвященных ширине и высоте абсолютно позиционируемых и неперемещаемых элементов.

    Для абсолютно позиционируемых блоков смещение осуществляется относительно контейнера. Для относительно позиционируемых блоков смещение осуществляется относительно внешней краевой линии самого блока (сначала блоку присваивается положение в нормальном потоке, а затем с использованием названных свойств указывается смещение относительно этого положения).