Позиционирование в CSS

Блочные элементы, как прямоугольные области, идущие друг за другом. Строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.

Любой элемент, который находится в потоке, занимает на странице свою собственную площадь, и если надо, отталкивает от себя соседей с помощью margin.

Cвойство position - задаёт ражим позиционирования элементов.
Значение static (по умолчанию) - обычное позиционирование.
Значение relative - относительное позиционирование.

top - позволяет сместить относительно с позиционированный элемент вверх или вниз относительно его исходного положение.
left - позоляет сместить блок влево или вправо относительно исходного положения.
bottom - аналогичен top, только смещает элемент в другом направлении.
right - аналогичен left и то же смещает элемент в другом направлении.

Значение absolute свойства position задаёт элементу абсолютное позиционирование.
Свойста:

• Выпадают из потока. Место, которое они занимали, занимают другие элементы.
• Ширина по умолчанию зависит от содержимого.
• Остаются на том же месте, где были если не заданы top, left, right, bottom.

По умолчанию абсолютные элементы позиционируются в системе координат, привязанной к окну браузера.
Неявная точка отсчёта - это то место, где находился элемент до того, как ему задали абсолютное позиционирование.

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

Фиксированное позиционирование задаёт значение fixed свойства position.
Свойства:

• Фиксированный элемент тоже выпадает из потока.
• Фиксированный элемент привязывается к определённой точке в окне браузера и остаётся на ней всегда, даже при прокрутке страницы.
• Фиксированный элемент можно позиционировать с помощью свойств top,left,right,bottom, но точка всегда привязана к окну браузера.

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