Иллюстрация

Следующий пример покажет абсолютно позиционированный бокс, являющийся дочерним от относительно позиционированного бокса. Хотя родительский бокс outer не имеет смещения, установка его свойства 'position' в 'relative' означает, что этот бокс может служить как содержащий блок для позиционированных потомков. Поскольку бокс outer это инлайн-бокс, разделённый на несколько строк, край верха первого инлайн-бокса и левый край (обозначенный толстой пунктирной линией на рисунке ниже) служат как ссылки для смещений 'top' и 'left'. #outer { position: relative; color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }

В результате получится примерно так: