Относительное позиционирование

Относительное позиционирование - загадочная вещь. Если судить по картинке в начале, оно похоже на абсолютное, но к нему зачем-то добавляется странный эффект: блок продолжает занимать место в потоке. Действительно, именно для позиционирования блоков этот метод используется редко. Хотя изредка и бывают ситуации, когда надо ради визуальных эффектов пододвинуть один бокс под другой.

Чаще же всего position:relative используют вообще без задания смещений. В этом случае он ведет себя как обычный статический блок, но поскольку он все-таки не статический, то он создает внутри себя содержащий блок ("стакан"), тот самый, относительно которого будут позиционироваться блоки, лежащие внутри него.

<div id="header"></div>

< div id="contents">

<div id="author"></div>

</div>

<div id=" footer"></div>

Пусть высота заголовка нам точно не известна. Боксы эти статические, идут один за другим, и какая бы высота у заголовка ни была, содержимое будет начинаться прямо под ним.

А теперь нам требуется внутри содержимого блочок об авторе расположить так, чтобы он был точно в правом верхнем углу содержимого.

#author { position:absolute; top:0; right:0; }

Как поведет себя блок?

Блок об авторе уедет поверх заголовка, так как содержащим блоком для него сейчас является все окно. Точно поставить ему расстояние от верха тоже нельзя, потому что по условию задачи размер заголовка у нас может быть разный. Следующая мысль - сделать блок содержимого тоже абсолютным, тогда он станет содержащим блоком. Но тогда он сам выдернется из потока и низ прижмется прямо к заголовку.

Вот это и есть случай, в котором работает position:relative. Если мы поставим его блоку содержимого, то он никуда не денется из потока, но в то же время станет содержащим блоком, и "об авторе" расположится в его правом верхнем углу.

Date: 2016-02-19; view: 414; Нарушение авторских прав