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

CSS позволяет определить точное положения HTML-элементов.
С помощью CSS программист может размещать содержимое двумя способами:

   1. абсолютное позиционирование позволяет указывать положение содержимого по отношению окна браузера.

   2. относительное позиционирование по отношению к элементу, внутри которого это содержимое находится.

position

Определяет используемый метод позиционирования.

Может иметь значение:

   static - обычный элемент, использующий установленную по умолчанию HTML-структуру (по умолчанию).
   relative - позиционирование элемента является смещением по отношению к его обычному положению в общей структуре страницы.
   absolute - позиционирование элемента определяется смещением по отношению к положению содержащего его элемента, и они не влияют на общую структуру.
   fixed - позиционирование элемента является смещением, как и в случае со значением absolute, но сам элемент фиксируется в окне браузера и при прокрутке окна не перемещается.

   p {position: absolute}
  top, right, bottom, left

Определяет величину смещения от определенного края (соответственно верхнего, правого, нижнего и левого).

Может иметь значение:

   auto - величина смещения выбирается браузером так, чтобы можно было разместить все элементы (по умолчанию).
Любая соответствующая стандарту    длина - число, представляющее величину смещения от края.
Любое соответствующее стандарту    процентное значение - отношение в процентах длины смещения к ширине элемента (для левого и правого края) или его высоте (для верхнего и нижнего края).    p {top: 20px; right: 40px}

Примеры: [1][2]

  z-index

Определяет порядок расположения элементов в стеке (slacking order).

Может иметь значение:

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

   img {z-index: 3}

Примеры: [1]