Как уже говорилось раньше, CSS как и любой язык, разработанный не одним человеком, предлагает решение любой проблемы сразу несколькими способами, а какой именно — решать вам. Сегодня же поговорим о том, как же можно размещать элементы на веб странице. Как я уже не раз повторял, существует аж 4 вида вида позиционирования элементов:
- Static — стандартный вид позиционирования, активный по-умолчанию. Не работают команды top,left,right и bottom. Элемент выводится в потоке документа.
- Fixed — фиксированное позиционирование, left, top, right и bottom отвечают за положение элемента относительно экрана, то есть элемент цепляется к абсолютной точке в браузере и не двигается с неё независимо от поведения пользователя.
- Absolute — абсолютное позиционирование, позиционируется относительно границ окна браузера. Обычно используется для размещения логической разметки сайта, но особенность этой разметки в том, что нужно указывать все границы, размер которых нужно учитывать, иначе элементы будут просто наслаиваться друг на друга. А мы ведь этого не хотим.
- Последним и самым оптимальным для мелких правок видом позиционирования элементов является — relative. Относительное позиционирование, как понятно из названия, указываемые вами данные берут за начало отчёта некую относительную точку, этими точками являются границы первоначального положения элемента. Относительно их и будет выстраиваться новая позиция элемента.
Как вы, возможно, заметили, эти вариации можно использовать для абсолютно разных целей, но так же их можно комбинировать для достижения различных графических эффектов. Я сейчас не буду приводить огромное множество возможных примеров использования и комбинирования этих видов позиционирования, скажу лишь, что большая часть сайтов в интернете так или иначе использует эти ухищрения для достижения нужного эффекта. Дерзайте!
