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