Позиционирование и координаты CSS

Слои и координаты в CSS играют большую роль, т.к. это просто и удобно.
Давайте рассмотрим простой пример наложения слоя на слой.
Слой 1 выше Слоя 2
Сделать слой выше можно 2-мя способами - изменить его относительно координаты Z либо в сторону + либо в - Но учтите минус работает не во всех браузерах, и часто он просто делает объект невидимым.

А достигается это очень интересным и необходимым свойством position, которое устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
В данном случае у свойства position значение relative, что означает, что положение элемента устанавливается относительно родителя, иными словами, контейнера, в который вложен элемент. В нашем случае этот контейнер является тегом <div>. Если родительский элемент явно не задан, то в качестве него выступает окно браузера. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемого параметра.
Мы не только сдвинули Слой 2 по оси Z, но и выставили left:5; и top:-15;, что означает сместить относительно левого края на 5 едениц, а относительно верха на -15, что и означало поднять на 15 пикселей. Единицы измерения могут быть любыми, выбирать Вам. Что же конкретно происходит в коде Вы можете увидеть посмотрев HTML вид этой страницы.

---