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