# Абсолютное позиционирование элементов на CSS

В данном уроке мы с вами разберем абсолютное позиционирование элементов. Оно позволяет располагать элементы по указанным координатам страницы. Например, можно расположить элемент в позицию `100px` сверху страницы и `200px` слева. Элемент переместится туда, не взирая на то, что там будут располагаться другие элементы и просто станет поверх их. Говорят, что при этом элемент выпадает из нормального потока документа: все остальные элементы будут вести себя так, будто нашего элемента нет.

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

Для вертикали нужно задать отступ или сверху, или снизу. Отступ сверху задает свойство `top`, а отступ снизу - свойство `bottom`. Для горизонтали нужно задать отступ или слева, или справа. Отступ слева задает свойство `left`, а отступ справа - свойство `right`.

Давайте посмотрим на примерах.

## Пример

Для начала давайте просто сделаем два блока без позиционирования (обратите внимание на то, что элементы не прижаты к краю окна, так как body имеет margin по умолчанию):

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 200px; height: 200px; border: 1px solid red; } #elem2 { width: 100px; height: 100px; border: 1px solid green; }`

:

## Пример

Давайте теперь зеленому блоку зададим абсолютное позиционирование, поставив его в позицию сверху `150px` и слева `100px`:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 200px; height: 200px; border: 1px solid red; } #elem2 { position: absolute; top: 150px; left: 100px; width: 100px; height: 100px; border: 1px solid green; }`

:

## Пример

Давайте теперь поставим зеленый блок в позицию `0px` сверху и `0px` слева:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 200px; height: 200px; border: 1px solid red; } #elem2 { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; border: 1px solid green; }`

:

## Пример

Давайте теперь поставим зеленый блок в позицию `0px` сверху и `0px` справа:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 200px; height: 200px; border: 1px solid red; } #elem2 { position: absolute; top: 0; right: 0; width: 100px; height: 100px; border: 1px solid green; }`

:

## Пример

Давайте теперь поставим зеленый блок в позицию `0px` снизу и `0px` справа:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 200px; height: 200px; border: 1px solid red; } #elem2 { position: absolute; bottom: 0; right: 0; width: 100px; height: 100px; border: 1px solid green; }`

:

## Пример

Давайте теперь поставим зеленый блок в позицию `0px` снизу и `0px` слева:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 200px; height: 200px; border: 1px solid red; } #elem2 { position: absolute; bottom: 0; left: 0; width: 100px; height: 100px; border: 1px solid green; }`

:

## Практические задачи

С помощью абсолютного позиционирования разместите блоки следующим образом:

С помощью абсолютного позиционирования разместите блоки следующим образом:

С помощью абсолютного позиционирования разместите блоки следующим образом:

С помощью абсолютного позиционирования разместите блоки следующим образом:

←→
↑