тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Фиксированное позиционирование на 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; }

:

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