Контекст расположения
Давайте коснемся поподробнее контекста размещения элементов, так как это понятие довольно важно для желающих отказаться от устаревших табличных разметок. Говоря простым языком, контекстное расположение означает, что при смещении элемента с помощью свойств 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 по отношению к внешнему. Если после этого мы сместим внешний элемент, внутренний элемент будет смещен вместе с ним.
Эта возможность использовать в качестве контекста расположения любой элемент позволяет полностью контролировать разметку и создавать страницы с несколькими колонками и областями содержимого.