# Фиксированное позиционирование на CSS

Сейчас мы разберемся с фиксированным позиционированием. Оно похоже на абсолютное, разница проявляется в том, как ведут себя эти типы позиционирования при наличии полосы прокрутки.

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

`<div id="elem"></div> <div id="content"> длинный текст, чтобы появилась полоса прокрутки </div>` `#elem { position: absolute; top: 30px; right: 30px; width: 100px; height: 100px; border: 1px solid green; } #content { margin: 0 auto; width: 300px; text-align: justify; font: 16px Arial; }`

:

## Фиксированное позиционирование

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

`<div id="elem"></div> <div id="content"> длинный текст, чтобы появилась полоса прокрутки </div>` `#elem { position: fixed; /* задаем фиксированное позиционирование */ top: 30px; right: 30px; width: 100px; height: 100px; border: 1px solid green; } #content { margin: 0 auto; width: 300px; text-align: justify; font: 16px Arial; }`

:

## Блок на всю ширину экрана

Чтобы фиксированный блок занял всю ширину экрана, ему нужно задать ширину `100%`:

`<div id="elem"></div> <div id="content"> длинный текст, чтобы появилась полоса прокрутки </div>` `#elem { position: fixed; top: 0; left: 0; width: 100%; height: 100px; border: 1px solid green; } #content { margin: 0 auto; width: 300px; text-align: justify; font: 16px Arial; }`

:

Повторите страницу по данному образцу:

←→
↑