На прошлом уроке мы начали обсуждать позиционирование элементов, а конкретно рассмотрели фиксированное позиционирование (position:fixed;). В этом уроке речь пойдет об относительном и абсолютном позиционировании.

Здесь важно вспомнить об отношении элементов друг к другу (родительский элемент и дочерние элементы).

Относительное позиционирование присуще родительским элементам и никак визуально не изменяет внешний вид документа (если конечно не задать ему координаты). При абсолютном позиционировании элемент позиционируется относительно своего родителя. Но если элемент находится внутри блока, то это не значит, что он примет его за родителя при выборе позиции в документе. Изначально дочерний элемент будет считать родителем body. Чтобы дочерний элемент позиционировался относительно родителя, в котором он находится, надо родителю в css задать вышеупомянутое относительное позиционирование (position:relative;).

В этом уроке речь пойдет о z-index, который позволяет нам ввести мнимую третью ось координат и позиционироваться вокруг этой мнимой оси. Элемент с самым большим z-index будет находиться на «переднем плане» документа (представьте себе стопку блинов на тарелке). Замечу, что z-index без установленного правила position работать не будет а также, что z-index может применять отрицательные значения.