Позиціювання елементів веб-сторінки за допомогою стилів.

Пройти тести на сайті Всеосвіта  →  у своєму кабінеті 

(введіть ваш код учня для авторизації та перейдіть до кабінету для перегляду завдання)

Презентація 

Завдання  

Довідник по CSS властивостях

Позиціювання елементів веб-сторінки за допомогою стилів

Розміщувати елементи на сторінці можна не лише за допомогою фреймів і таблиць –каскадні стилі надають для цього додаткові цікаві можливості.

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

·      static – статичне; задане за умовчанням і передбачає розміщення чергового об’єкта на вільному місці після попереднього;

·      relative – відносне; визначає розташування об’єкта відносно того місця, яке б він зайняв, якби для нього було використане статичне позиціювання;

·      absolute – абсолютне; передбачає розміщення об’єкта шляхом задавання точного місця його розташування на сторінці.

Для відносного та абсолютного позиціювання використовують чотири властивості – left (ліворуч) та right (праворуч), які задають відступи для розміщення об’єкта по горизонталі, і top (згори) та bottom (знизу) – по вертикалі. Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об’єкт, описаний першим, а зверху – той, який описали останнім.

Якщо потрібна зміна стандартного порядку накладання, застосовують шари. Шар об’єкта задають за допомогою властивості z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об’єкт із більшим значенням z-index розміститься поверх об’єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об’єкти матимуть однакові її значення, то зверху розташується об’єкт, описаний нижче за текстом у HTML-документі.