Бувають ситуації, що необхідно показувати користувачеві якусь інформацію незалежно від того, яке місце html-сторінки він зараз читає. Тобто потрібно зробити так, щоб текст прокручувався, а якась область залишалася на місці і завжди була перед очима відвідувача.
Погодьтеся, що це дуже цікавий і корисний ефект?
Давайте зараз розберемося, як таке можна зробити на практиці. Є кілька способів, як цього можна домогтися, але я зупинюся на найсучаснішому з них - фіксоване позиціонування за допомогою стилів CSS.
Для того, щоб зрозуміти, як все працює, нам потрібно створити пробну html-сторінку і створити в ньому два блоки
Насправді це саме позиціонування елемента в потрібному місці екрану здійснюється всього-на-всього за допомогою одного властивості CSS position: fixed. Дивіться, як його можна використовувати на практиці.
Ідентифікатором footer, який ми з вами вказали раніше для тега
position: fixed; - позиція блоку фіксована і положення свого не міняє.
bottom: 0px; - блок цей повинен знаходитися в самому низу html-сторінки.
Наступні властивості відповідають за відображення зовнішнього вигляду блоку, щоб його можна було відрізнити від основного тексту:
text-align: center; - вирівнювання тексту по центру
background: # 990000; - колір заднього фону
color: #FFFFFF; - колір тексту
width: 100%; - ширина сторінки
От і все. Тепер можете подивитися на результат в браузері. Сподіваюся, що у вас все вийшло.
Таким же способом ви можете зафіксувати положення практично будь-якого блоку на html-сторінці.
Ось таке цікаве властивість є у стилів CSS. Використовуйте його за призначенням на благо своєї справи.
Можливо, вам будуть цікава моя послуга верстки посадочних сторінок. Тоді, натисніть на посилання нижче, щоб дізнатися про це докладніше.