Учебник HTML 

Урок 15. Позиционирование элементов

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с "поплавками", которые мы разбирали в двух предыдущих уроках, позиционирование даёт нам широкие возможности для создания точного, идеально подогнанного и выверенного дизайна.

Принцип CSS-позиционирования  заключается в том, что вы можете расположить элемент на странице сайта где хотите с точностью до одного пикселя. Это более точная техника, чем использование таблиц.

Например, мы хотим разместить заголовок на 100 пикселей сверху экрана и точно по центру относительно горизонтальных краев:

h2 {
position:absolute;
top: 1000px;
left: 680px;
}

Позиционирование элемента может быть абсолютным и относительным.

При абсолютном позиционировании элемент устанавливается точно в том месте экрана, которое ему задано, без учета других элементов. Для примера, я добавил заголовок <---h1> в код. Рассмотрим пример в котором надпись будет расположена на 1000px отступ сверху, и 680px слева. Если у вас разрешение меньше чем 1024px, в высоту,то вам следует прокрутить сайт вниз.

Смотрим пример:

Как мы видим, тег заголовка добавлен в самый конец кода, однако его абсолютное позиционирование (top:1000px;  left:680px;) вставляет его поверх существующего текста.

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

Смотрим пример:

Попробуйте самостоятельно поэкспериментировать с позиционированием различных элементов.

См. также

• Следующий урок: Слои.
• Предыдущий урок: Поплавки (продолжение).