Технология CSS допускает возможность размещать что угодно, и где угодно. Для этого необходимо просто указать координаты блока. Под блоком подразумевается не только <div>, но и заголовки, рисунки, списки, параграфы, и все, что является блоковой моделью. Это поможет создать действительно уникальный и привлекательный дизайн.

Мы будем расматривать две основные модели позиционирования:

Абсолютное позиционирование (POSITION:ABSOLUTE;)

Очень часто для позиционирования применяется именно этот тип. В технологии CSS, мы обозначаем свойство позиционирования  POSITION, а для указания того, что это позиционирование абсолютное, пишут значение ABSOLUTE. После мы ипользуем доступные ключевые слова top, right,bottom,left они укажут на необходимые координаты, которые отсчитываются от краев окна браузера.

На рисунке ниже я специально сделал рамку боксу, чтобы вы поняли, откуда отсчитываются координаты.

Большим плюсом абсолютного позиционирования является то, что бокс с абсолютным позиционированием располагается по заданным координатам, а с места, где он должен был располагаться, он удаляется.
Давайте я лучше покажу вам пример:

Возьмем документ с одним изображением и обтекающим его текстом.

Давайте теперь, спозиционируем изображение, для чего создадим класс, и присвоим его изображению. Код класса будет выглядеть примерно так:

.smile{
border: 2px solid blue;
position:absolute;
top:200px;
right:200px;
}

Ну а с html думаю, проблем у Вас не будет, чтобы применить класс к изображению, пишем типо <img class=»smile»> .

Как мы заметили, изображение переместилось на заданные координаты, а вместо него теперь текст. В примере есть красная рамка, это я сделал, что бы было более понятно, а вообще её лучше не делать.

Обычно всегда указывают только двое координат.

Еще один пример стиля:

.smile{
position:absolute;
bottom:400px;
left:200px;
}

Если нужно закрепить блок, что бы, он не прокручивался со странней, надо указать значение FIXED.

.smile{
position:fixed;
bottom:400px;
left:200px;
}

Относительное позиционирование (POSITION:RELATIVE; )

При относительном позиционировании, бокс сместится, но его прежнее место ничем не будет заполнено. Обозначается как POSITION: RELATIVE;

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

Пример простого документа с текстом и рисунком:

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

Css код:

.smile{
border:1px solid blue;
position:relative;
top:400px;
left:200px;
}

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

Ниже предоставлен скриншот из предыдущего примера.

С этим тоже все разъяснили. Давайте дальгше.