Давайте коснемся поподробнее контекста размещения элементов, так как это понятие довольно важно для желающих отказаться от устаревших табличных разметок. Говоря простым языком, контекстное расположение означает, что при смещении элемента с помощью свойств top, left, right, bottom вы двигаете его относительно другого элемента; этот второй элемент и называется контекстом расположения. Контекстом расположения элемента с абсолютным позиционированием по умолчанию является элемент body.
Элемент body содержит все остальные элементы разметки, но в качестве контекста расположения можно использовать и другие элементы, изменив значения их свойства position на relative.
Например, для такой разметки:
<body>
<div id="outer">Внешний div
<div id="inner">Внутренний div</div>
</div>
</body>
Если мы зададим для свойства position внутреннего div значение absolute, он будет расположен относительно body, так как body является по умолчанию контекстом расположения. С помощью свойств top и left мы сместим внутренний div относительно body.
Если затем для внешнего div задать значение relative свойства position, контекстом расположения для внутреннего div станет внешний div. Теперь с помощью свойств top и left мы будем смещать внутренний div по отношению к внешнему. Если после этого мы сместим внешний элемент, внутренний элемент будет смещен вместе с ним.
Эта возможность использовать в качестве контекста расположения любой элемент позволяет полностью контролировать разметку и создавать страницы с несколькими колонками и областями содержимого.