Абсолютное позиционирование элементов на 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; }

:

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

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

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

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

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