Урок 18. Позиціонування елементів. Частина 1

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

Відео: Урок 8. Позиціонування елементів - частина 2. Відносне і абсолютне позиціонування

Це перша частина вісімнадцятого уроку вивчення CSS. У цьому урок ми почнемо вивчати дуже важлива властивість, властивість позиціонування. Вивчивши його, вам спростить це роботу з шаблонами для сайтів, а також при їх створенні (особливо при створенні шаблону це властивість обов`язково знати). Для вивчення позиціонування я зверстав невеликий шаблон щоб показувати на реальному прикладі. Я думаю так буде найбільш зрозуміло.

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

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

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

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

Дана властивість має кілька значень:

position: absolute | relative | static | fixed

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

У цьому уроці ми вивчимо тільки перше значення властивості. Код html сторінки я не буду тут викладати, а тільки посилання на скачування і перегляд прикладу в браузері, тому що код буде займати багато місця на сторінці. Створимо блок і застосуємо для даного блоку властивість position: absolute:

1234567

#corner{background-image: url(`Images / corner.jpg`)-background-repeat:no-repeat-width:176px-height:175px-position:absolute-}

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

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

Як бачите даний блок став «над іншими» блоками. Навіть незважаючи на те що цей блок працював би в якомусь блоці. Більше він підкоряться властивості блоку батьків не буде. Але даний блок знаходиться в положенні не дуже зручному для нас. Щоб спозиционировать даний блок існують властивості: top, left, right і bottom. Більш докладно я розповім в міні-курсі по створенню шаблон. Давайте розмістимо цю картинку з сюрпризом відразу після меню:

Відео: GoToWeb - Відеокурс Html і Css, урок 34, Позиціонування в CSS

123456789

#corner{background-image: url(`Images / corner.jpg`)-background-repeat:no-repeat-width:176px-height:175px-position:absolute-top:68px-left:0-}

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

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

На цьому сьогодні закінчимо. У наступному уроці ми розглянемо значення relative властивості position. Спробуйте попрацювати з даними властивістю. Тут немає нічого складного як бачите.

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