Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 5:

Позиционирование средствами CSS

Аннотация: Типы позиционирования элементов в CSS и их особенности. Позиционирование на основе плавающих элементов. Приёмы центрирования и наложения элементов.

CSS предлагает четыре типа позиционирования.

  • Абсолютное ( position:absolute; ). Такое позиционирование позволяет определять расположение элемента, задавая позиции left, right, top или bottom в любых единицах измерения CSS. Кроме того, абсолютно размещенные элементы полностью изъяты из потока страницы, определенного HTML-кодом: остальные элементы на странице размещаются без учёта абсолютно позиционированных элементов.
  • Относительное ( position:relative; ). Элемент с таким позиционированием размещается относительно его текущего положения в потоке HTML. Так, например, устанавливая значение top равным 20 пикселов и значение left равным 200 пикселов для относительно размещенного заголовка, вы переместите его на 20 пикселов вниз и 200 пикселов влево от того места, где он появился бы на странице. В отличие от абсолютного позиционирования, здесь остальные элементы страницы регулируют старое HTML-размещение относительно позиционированного объекта. Соответственно, перемещение объекта с относительным позиционированием оставляет "дыру", на месте которой он должен был находиться. Основная польза относительного позиционирования не в том, чтобы переместить элемент, а в установке новой точки привязки для абсолютно позиционированных элементов, которые вложены в него.
  • Фиксированное ( position:fixed; ). Фиксированный элемент закрепляется в определенном месте на экране. Определение такого позиционирования играет ту же роль, что и установка значения fixed для свойства background-attachment при позиционировании фоновых изображений. Когда посетитель прокручивает страницу, фиксированные элементы остаются на экране как абзацы и заголовки, в то время как фотографии прокручиваются вместе со страницей. Использование фиксированных элементов — отличный способ создать неподвижное боковое меню или воспроизвести эффект HTML-фреймов, где только определенная часть страницы прокручивается.
  • Статическое позиционирование соответствует нормальному потоку HTML.

Статическое и абсолютное позиционирование

Основной механизм позиционирования. Нормальный поток.

В отсутствие каких-либо дополнительных указаний (в виде правил CSS или атрибутов HTML) браузер размещает содержимое на странице по следующим правилам:

  • Ширина блочного элемента равна ширине его контейнера; ширина строчного элемента такова, как требует его содержимое.
  • Высота и для блочных, и для строчных элементов равна высоте их содержимого.
  • Браузер размещает элементы в их контейнерах слева направо, затем сверху вниз, начиная с контейнера body.
body {
      background-image: url(Pos_divs_body.png);
    }
    div {
      color: Blue;
      border: solid 1px blue;
      margin: 2px;
      padding: 4px;
      font-size: large;
    }
    div div {
      color: Red;
      border: solid 1px red;
    }
  ...
  <div>
    Это текст в контейнере div - Lorem ipsum...
    <div>
      Это текст в контейнере div - Lorem ipsum... </div>
    Это текст в контейнере div - Lorem ipsum...
  </div>
Листинг 6.1. Нормальный поток
Нормальный поток

Рис. 6.1. Нормальный поток
Упражнение.Откройте пример в отдельном окне и убедитесь, что все div-контейнеры всегда занимают всю ширину окна, независимо от её величины. Уменьшите ширину контейнеров div (например, width:40%; ) и убедитесь, что появившееся пространство остаётся незаполненным.

Очевидно, что, если документ состоит из набора контейнеров, то в рамках нормального потока можно как угодно управлять их взаимным положением по вертикали и смещением по горизонтали относительно границ окна - пользуясь свойствами margin и width.

Однако в нормальном потоке невозможно разместить два (и более) смежных по горизонтали блока: любой блочный элемент всегда занимает всю ширину своего контейнера. Невозможно дать браузеру команду: "Элемент X следует разместить справа (слева) от элемента Y", не прибегая к использованию других механизмов.

Абсолютное позиционирование.

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

<style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }
        div {
            border: solid 1px blue;
            padding: 4px;
        }
        .static {
            color: Blue;
            padding: 2em;
        }
        .abs {
            position: absolute;
            top: 0px; right: 0px;
            color: Red;
            border: solid 1px red;
        }
    </style>
   ...
    <div class="static">
        Это текст в обычном (статически позиционированном) контейнере div - Lorem ipsum...
        <div class="abs">
            Этот контейнер div позиционирован абсолютно вправо (top: 0px; right: 0px;) - Lorem ipsum dolor sit amet
        </div>
    </div>
Листинг 6.2. Абсолютно позиционированный блок в правом верхнем углу
Абсолютно позиционированный блок в правом верхнем углу

Рис. 6.2. Абсолютно позиционированный блок в правом верхнем углу
<style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }
    div {
      border: solid 2px blue;
      padding: 4px;
    }
    .static {
      position: absolute;
      color: Blue;
      padding: 2em;
    }
    .abs {
      position: absolute;
      bottom: 0px;
      right: 0px;
      color: Red;
      border: solid 2px red;
    }
  ... 
  <div class="static">
    Это текст в <b>абсолютно позиционированном</b> контейнере div - Lorem ipsum...
    <div class="abs">
      Этот контейнер div позиционирован абсолютно вправо и вниз (bottom: 0px; right: 0px;)
      - Lorem ipsum dolor sit amet
    </div>
  </div>
Листинг 6.3. Абсолютно позиционированный блок в абсолютно позиционированном блоке
Абсолютно позиционированный блок в абсолютно позиционированном блоке

Рис. 6.3. Абсолютно позиционированный блок в абсолютно позиционированном блоке

Очевидно, абсолютное позиционирование даёт полную свободу поместить любой элемент в любую точку - достаточно знать её координаты, выраженные в какой-либо из единиц измерения CSS. Однако часто координаты заранее неизвестны (они могут зависеть, например, от высоты текстового блока). В этом случае средства абсолютного позиционирования недостаточно. Нет способа выразить, например, такую команду: "Элемент X следует поместить слева (справа, сверху, снизу) от элемента Y".

Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Nat Ves
Nat Ves
Израиль
Татьяна Орлова
Татьяна Орлова
Россия, Воронежская область