Что такое позиционирование? Для ответа на этот вопрос достаточно зайти на любой сайт и посмотреть на него со стороны «что и где находится». Например, на этой странице вверху слева находится логотип, а под ним располагается небольшое меню. Таким образом, каждому элементу на странице отведено своё, предназначенное для него место. Но само по себе местонахождение элементов в разных участках страницы не является позиционированием. Позиционирование — это управление расположением элементов на веб-странице.
Для позиционирования элементов средствами CSS используется свойство position. Оно может принимать одно из 5 значений, о которых я расскажу по порядку.
1. Position: static
В CSS статическое позиционирование задано для каждого элемента по умолчанию и означает, что элемент выводится в той последовательности, которая задана в HTML-коде документа (“прямом потоке”).
2. Position: absolute
А вот абсолютно позиционируемый элемент располагается в окне браузера в соответствии с заданными координатами.
Пример:
#history {
position: absolute;
top: 300px;
background-color: #eee;
width: 400px;
}
Значение top: 300px смещает блок #history на 300 пикселов от верхней границы родителя.
Следует обратить внимание на второй блок #foundations, который выводится в “прямом потоке” HTML-кода. На рисунке (рисунок, к сожалению, недоступен — прим. Seoded.ru) видно, что он оказался на том месте, где находился блок #history. Всё дело в том, что абсолютно спозиционированный блок (#history) не только смещается в соответствии с указанными координатами, но и исключается из “прямого потока”,. Т. е. на том месте, где он должен был находиться, выводятся следующие блоки.
Для более наглядного представления предлагаю рассмотреть ещё две иллюстрации (к сожалению, так же недоступны — прим. Seoded.ru).
Для наглядности я использовал всего лишь один блок, у которого менял координаты его расположения на странице.
Внимание! Очень важно понимать, относительно чего смещается свободно позиционируемый блок! Абсолютно позиционируемый блок смещается относительно ближайшего родительского элемента, который имеет значение либо absolute, либо relative. В случае, если ни один из родительских элементов не имеет одного из указанных значений, то смещение происходит относительно внутренней стороны окна браузера.
Должен отметить, что иллюстраций можно приводить сколько угодно, но для понимания их очень и очень недостаточно. Чтобы хорошо разбираться, как ведут себя абсолютно позиционируемые блоки, самый лучший способ — самому сделать страницу с двумя и более блоками и “поиграться” с ними, назначив одному или нескольким из них свойство position: absolute.
3. Position: relative
При данном значении элемент смещается относительно его расположения в потоке документа.
Такое позиционирование называется относительно-абсолютным. Т. е. сам элемент смещается, но не исключается из “прямого потока” документа.
4. Position: fixed
Значение fixed аналогично значению absolute. Разница заключается в том, что при значении fixed элемент фиксируется таким образом, что даже при прокрутке окна браузера он остаётся на месте.
Внимание! Internet Explorer, в отличие от большинства других современных браузеров, не поддерживает значение fixed до 6-ой версии включительно.
5. Position: inherit
Значение inherit всего лишь указывает на то, что для свойства position принимается значение родительского элемента.
Пример:
<style type="text/css">
#parent {
position: relative;
}
#parent #child {
position: inherit;
}
</style>
<div id="parent">
<div id="child">
Блок #parent является родительским для блока #child.
Таким образом, блок #child наследует значение relative.
</div>
</div>
Автор: Никита Мосияш.