В сегодняшнем уроке Вы узнаете о разных типах позиционирования в CSS.

Многие начинающие вебмастера знают о существовании разных типов позиционирования для представления данных на веб страничках.

Всего существует 4 типа позиционирования absolute, fixed, relative и static. Они существенно отличаются друг от друга. Каждый из них очень полезен и при правильном использовании Вы всегда получите желаемый результат.

При работе с позиционированием важно понять одну концепцию: все элементы на странице - это блоки. Грубо говоря, прямоугольники из пикселей. Это означает, что каждому блоку можно присвоить и высоту, и ширину в пикселях. Блоки (элементы) бывают также инлайновыми. Они тоже в виде прямоугольников, но лежат на странице немного иначе. Они выстраиваются друг за другом по-горизонтали.

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

- STATIC. Это значение по умолчанию для любого элемента на странице. Это самый простой тип и практически ничего не означает. Все выглядит как должно выглядеть.

- RELATIVE. Этот тип позиционирования наиболее трудный и неправильно используемый. Если ВЫ присвоете элементу position: relative;, но не придадите каких-либо других атрибутов (top, left, bottom или right), тогда ничего не изменится. Все останется на своих местах (также как и первым типом позиционирования). Но если Вы добавите атрибуты (например, top: 10px), тогда элемент сместится на 10 пикселей вниз от того места, где он обычно располагался. Это очень полезно при выравнивании элементов формы в один ряд.

Кроме этого, есть еще две вещи, которые происходят при употреблении position: relative. Во-первых, это возможность использовать на этом элементе z-index. С помощью этого свойства можно добиться интересных решений для любого сайта. Во-вторых, Все дочерние элементы относительно позиционированого элемента могут быть позиционированы абсолютно. Это позволяет решать практически любые задачи по оформлению страничек. Если не совсем понятна суть, тогда достаточно взглянуть на изображения ниже:

- ABSOLUTE. Очень мощный тип позиционирования, который позволяет поместить любой элемент в любом месте страницы. Для этого используются аргументы top, left, bottom и right. Самое главное запомнить, что элементы с абсолютным позиционированием как бы вырваны из структуры страницы. На элемент с таким типом позиционирования не влияют другие элементы, и он также не влияет на них. Это необходимо всегда держать в уме при создании сайтов. Неправильное или частое использование такого типа может ограничить гибкость Вашего сайта.

- FIXED. Этот тип позиционирования очень редкий. Элемент с таким типом позиционируется относительно к окну просмотра, то есть браузеру. При скролле, такой элемент будет оставаться всегда на том же месте. Взгляните на этот сайт. При прокрутке вниз с левой стороны меню остается на одном и том же месте. Этот пример одновременно показывает и плюсы, и минусы такого типа позиционирования. Преимуществом является то, что навигация всегда на виду, и вообще это интересный эффект для посетителей. Минусы возможно не видны с первого взгляда. Если зайти на эту страницу с ноутбука с маленьким экраном, например, тогда панель с навигацией будет видна не полностью (и никак не удасться ее просмотреть, так как не будет скролла). Вообщем, это классный эффект, но требует тщательного тестирования

На сегодня все! Всем доброго времени суток!!

P.S. Если что-либо непонятно, смело спрашивайте в комментариях! Попробую ответить на все Ваши вопросы по теме.