Позиционируем элементы с CSS

Позиционирование элемента? Это же элементарно! Взял и поставил!

CSS-позиционирование

Есть три главные схемы позиционирования - это нормальный поток, обтекание и абсолютное позиционирование. 

1. Нормальный поток - относительное и липкое позиционирование уровня блока и строки (блочный контекст форматирования - элементы display, block, list-item или table; строчный контекст форматирования - display inline, inline-block или inline-table). 
2. В Обтекании блок удаляется из нормального потока и позиционируется справа или слева от элемента (float: left/right). 
3. Абсолютное позиционирование полностью убирает элемент из нормального потока и ему присваивается позиция относительно непосредственно блока. (position: absolute/fixed)

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

Свойство position

Свойство position определяет, какой алгоритм позиционирования используется. Существует несколько алгоритмов позиционирования:

1. position: static - блок располагается в соотвествии с нормальным потоком.
2. position: relative - блок располагается, смещаясь относительно нормальному потоку.
3. position: absolute - положение блока задаётся с помощью атрибутов top, bottom, left, right ( в них можно указывать как и растояние в пикселях, так и процентуальные значения относительно экрана ), границы с помощью атрибута margins. Абсолютное позиционирование убирает блок из нормального потока.
4. position: sticky - блок располагается, смещаясь относительно ближайшему предку потока.
5. position: fixed - блок располагается во всём окне просмотра.
6. position: initial - блок располагается по умолчанию.
7. position: inherit - блок располагается относительно родительскому элементу.

С помощью свойства float можно установить обтекание элементов ( left/right, в зависимости от стороны обтекания ).
Теперь вы можете сместить блоки - так держать!