Урок 18. Позиціонування. Частина 3

Відео: Основи маркетингу. Урок 5. з 10. Позиціонування

Здрастуй, шановний читачу.

Це третя частина вісімнадцятого уроку вивчення позиціонування в CSS. У цьому урок ми вивчимо значення fixed і значення static властивості позиціонування і розглянемо їх на прикладі. На цьому ми завершимо 18-й урок про позиціонування.

Перед вивченням даного уроку пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту
Урок 7. Рамки
Урок 8. Оформлення списків
Урок 9. Спадкування
Урок 10. Блокова модель
Урок 11. Висота і ширина блоку
Урок 12. Конфлікти полів
Урок 13. Робота з зображеннями. Частина 1
Урок 13. Робота з зображеннями. Частина 2
Урок 14. Таблиці
Урок 15. Форми
Урок 16. Властивість float
Урок 17. Каркас на основі властивості float
Урок 18. Позиціонування. Частина 1
Урок 18. Позиціонування. Частина 2

Теорія та практика

У цьому уроці ми завершимо розглядати таку властивість як позиціонування. Для цього необхідно розглянути два значення даного властивості. це значення fixed і значення static.

position: absolute | relative | static | fixed

позиціонування fixed

Також для прикладу візьмемо шаблон з минулих уроків. Для того щоб зрозуміти як працює дане значення будемо працювати з меню, яке знаходиться в самому верху.

Відео: Курс CSS - Урок №35. Absolute-позиціонування

Подивитися прімерСкачать

Давайте зробимо це меню фіксованим. Тобто при прокручуванні сторінки дане меню залишається постійно вгорі:

1234567891011

#menu{position:fixed- / * Встановлюємо фіксоване позиціювання * /background-image: url(`Images / bg_menu_banner.jpg`)-background-repeat:repeat-x-height:84px-width:100%-margin:0-top:0-left:0-z-index-5- / * На дане значення поки що ніхто не дивиться * /}

Як це виглядає в браузері:

Подивитися прімерСкачать

При використанні даного значення не має значення де знаходиться даний блок, тому що він буде завжди позиціонуватися щодо вікна браузера. Також для того щоб меню нормально розташовувалося на сторінці, для шапки задамо відступ розміром з висоту меню. У цей можете детально не вникати, про це я розповім в міні-курсі по верстці шаблону.

позиціонування static

Я залишив дане значення на край, бо дане значення дається будь-якого блоку за замовчуванням. Тобто якщо ви навіть не будете задавати властивість позиціонування, за замовчуванням йому присвоїться значення position: static.

На цьому закінчуємо розгляд позиціонування в CSS. Обов`язково пробуйте практично використовувати дане властивість.

Більше практикуйтеся!