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

Создание столбцов

Итак, мы имеем базовые строительные блоки, но они появляются только один за другим. Нам требуются три столбца, поэтому нужно сделать их плавающими.

1. Добавьте в файл CSS следующие правила:

#main {
  float: left;
}

#sidebar {
  float: left;
  width: 13em;
  padding: 0 0.5em;
  background-color: #ff6;
}

#nav {
  float: left;
  width: 11em;
  padding: 0 0.5em;
  background-color: #ddd;
}

Это сделает их плавающими, отлично, но они находятся в неправильном порядке. Также столбец основного контента слишком узкий. И что произошло с нашим нижним колонтитулом?

2. Давайте сначала разберемся с нижним колонтитулом. Проблема состоит в том, что три столбца являются плавающими, что извлекает их из потока документа. Нижний колонтитул выталкивается вверх рядом с верхним колонтитулом и содержащий текст линейный бокс укорачивается, так что слово "Footer" появляется справа от плавающих элементов. Можно исправить это, очищая нижний колонтитул от всех плавающих столбцов. Добавьте в файл CSS следующее правило:

#footer {
  clear: left;
  border-top: 1px solid #369;
}

3. Теперь займемся тремя столбцами. Это будет сделано шаг за шагом, и будет выглядеть достаточно уродливо в течение некоторого времени, но не отчаивайтесь - в конце все встанет на свои места.

Ключевым моментом в этом подходе является элемент оболочки. Мы зададим на нем левое и правое поле, которые соответствуют по ширине боковым столбцам (навигации и боковой панели). Столбец основного контента будет занимать всю ширину оболочки, в то время как боковые столбцы будут смещаться в пространство, освобожденное полями. Звучит замысловато? Не беспокойтесь, мы разберем это подробно, маленькими шагами. Сначала зададим для оболочки поля, добавляя следующее правило в файл CSS:

#wrapper {
  margin: 0 14em 0 12em;
  padding: 0 1em;
}

Помните, что значения в сокращенном свойстве margin определяются в следующем порядке: top, right, bottom, left. Мы задаем верхнее и нижнее поля как 0, правое поле равным 14em (для боковой панели) и левое поле как 12em (для навигации). Мы добавляем также горизонтальное заполнение в 1em, так как мы не хотим, чтобы контент вплотную подходил к боковым столбцам, ему нужно немного пространства для дыхания.

4. Следующий шаг состоит в задании для столбца основного контента всей ширины оболочки его предка; код временно также задаёт для него яркий цвет фона, итак делаем следующее:

#main {
  float: left;
  width: 100%;
  background-color: lime;
}

5. Сохраните и перезагрузите - вы увидите ярко-зеленый столбец контента, с боковой панелью и навигацией ниже его. Вы также заметите, что с обеих сторон имеется много свободного пространства. Нам надо заставить наши боковые столбцы проскользнуть в это свободное пространство.

Затем мы перейдем к боковой панели - она является плавающей и имеет правильную ширину, но так как столбец #main имеет ширину 100%, он смещает боковую панель вниз. Как заставить ее подняться вверх и остаться рядом с #main, когда #main занимает всю ширину? Давайте сделаем это за два маленьких шага: сначала мы переместим ее вверх, а затем сместим ее на поле.

6. Здесь мы используем хитроумный прием, чтобы заставить плавающую боковую панель, которая была смещена вниз, снова переместиться вверх - сделаем следующее добавление в правило #sidebar:

#sidebar {
  float: left;
  width: 13em;
  padding: 0 0.5em;
  background-color: #ff6;
  margin-left: -14em;
}

7. Сохраните и перезагрузите, и вы увидите, что боковая панель теперь находится на том же вертикальном уровне, что и столбец контента. Задавая отрицательное левое поле равным ширине боковой панели, мы смещаем элемент назад в оболочку и он не выталкивается вниз. Проблема теперь в том, что он перекрывает контент.

8. Нам нужно сместить панель на место поля так, чтобы она не упала снова вниз, и именно здесь начинает играть - наконец - относительное позиционирование. Оно делает именно то, что нужно: оно смещает сгенерированный бокс, не перемещая сам элемент. Добавьте выделенные ниже свойства в правило для #sidebar:

#sidebar {
  float: left;
  width: 13em;
  padding: 0 0.5em;
  background-color: #ff6;
  margin-left: -14em;
  position: relative;
  left: 15em;
}

Отметим, что нужно сместить ее на 15em, а не 14em - потому что имеется правое заполнение в 1em для оболочки, которое необходимо пропустить. Боковая панель находится теперь там, где должна быть: на месте поля, рядом со столбцом контента, аккуратно выровненная с правыми краями верхнего и нижнего колонтитулов.

9. Теперь нужно сделать то же самое с навигацией, что делается аналогично, но со своими особенностями. Перемещение и сдвиг боковой панели выполняется легко, так как эти движения были по сути такими же, как и ширина столбца: отрицательное поле 14em и смещение на 14em+1em вправо. Но столбец навигации необходимо переместить через весь столбец контента и затем сдвинуть еще дальше на поле.

Нашим помощником здесь будут проценты. Значение процента на полях навигационного столбца будет задаваться относительно ширины его предка, оболочки. Чтобы переместить столбец через всю оболочку - добавьте свойство, выделенное ниже в правиле #nav:

#nav {
  float: left;
  width: 11em;
  padding: 0 0.5em;
  background-color: #ddd;
  margin-left: -100%;
}

10. Сохраните и перезагрузите еще раз, и вы должны увидеть как навигация перекрывает левую сторону столбца контента. Теперь необходимо сместить ее на поле. Добавьте следующие выделенные свойства в правило для #nav:

#nav {
  float: left;
  width: 11em;
  padding: 0 0.5em;
  background-color: #ddd;
  margin-left: -100%;
  position: relative;
  right: 13em;
}

Ширина навигации снова будет 12em, но еще надо пропустить 1em заполнения оболочки, поэтому требуется сместить бокс на 13em. Вы смещаете его влево, другими словами от правого края, поэтому и используется свойство right.

11. Удалите ярко-зеленый фон из столбца контента, и все будет готово.