Сейчас мы разберемся с фиксированным позиционированием. Оно похоже на абсолютное, разница проявляется в том, как ведут себя эти типы позиционирования при наличии полосы прокрутки.
При прокручивании страницы абсолютно спозиционированные элементы будут прокручиваться вместе со страницей. Смотрите пример:
<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;
}
: