Как понять значение свойства position в CSS?

Ох, самое замудреное свойство. Если его неправильно использовать, то все наполнение сайта просто перемешается в кучу. Проверено лично 🙂 (это одна из причин, по которым для оформления лучше использовать js). Посмотрим какие значения может принимать position:

1) Значение relative. Элемент имеет за собой четко закрепленное пространство. Если мы его добавим на страницу, то он поменяет положение других элементов (ну если только не в конец добавлять). Рассмотрим пример:

text text text

text text text

Теперь вставим элемент, с отступом от левого края 300px.

text text text

text text text

Несмотря на то, что рисунок test.jpg у тебя будет стоять слева, пропуск между текстом увеличится.

2) Значение absolute. В этом случае за элементом не закреплено никакого пространства. Опять же, вернемся к примеру с текстом, только вместо relative, пишем absolute.

text text text

text text text

Отступы между абзацами не изменяются. Такое позиционирование опасно тем, что может произойти наложение нескольких элементов друг на друга. Ведь в случае с relative, если убрать отступ 300px, то рисунок встанет в пропуск между текстом, а в случае с absolute - наложится на текст.

3) Значение fixed. Весьма полезная вещь, если уметь с ней обращаться. Вернемся к нашему примеру с текстом.

text text text

И еще куча текста для того, чтобы появилась полоса прокрутки

Если запустить этот пример в браузере, то видно, что картинка при прокрутке не будет перемещаться. Как будто она "прилипла" с другой стороны монитора. В остальном полный аналог absolute - никакого пространства за элементом не закреплено.

4) Есть еще 2 значения static и inherit. static похож на relative, только никакие left, right и т.п работать не будут. Элемент будет все время стоять слева. inherit задает новому элементу такое же значение, какое было задано предыдущему. Но наследственность будет идти по линии одного свойства. Примерчик для inherit:

Если вместо inherit записать relative, то получится тоже самое.

Пожалуй все, удачи в изучении 🙂