Стиль position

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

Може приймати такі значення:

static - значення по-замовчуванню. На статичні блоки не впливають стилі left, top, right, bottom. Статичні блоки можна зміщувати зі своїх позицій за допомогою зовнішніх відступів, (jsFiddle).

relative - відносне позиціонування елемента. Стилі left, top, right, bottom зсувають елемент відносно поточної позиції, (jsFiddle).

absolute - абсолютне позиціонування елемента. Стилі left, top, right, bottom зсувають елемент відносно країв першого НЕ-статичного батьківського елемента. Якщо серед батьків немає НЕ-статичних батьків - позиціонування відбувається відносно вікна браузера в момент завантаження сторінки (jsFiddle).

fixed - фіксоване позиціонування елемента. Стилі left, top, right, bottom зсувають елемент відносно вікна браузера, прокрутка сторінки не впливає на положення елемента у вікні браузера, (jsFiddle).

При абсолютному та фіксованому позиціонуванні батьківські елементи перестають бачити свої дочірні елементи і схлопуються (абсолютно і фіксовано зпозиціоновані блоки виділяються в окремий шар). Інші блоки, текст також не бачать ці блоки (jsFiddle).

Абсолютне та фіксоване позиціонування перетворюють будь-який елемент у блочний, стиль display буде проігнорований, його задавати не треба (jsFiddle).

Позиціонування можна задавати від'ємними значеннями. А також використовувати пари left і right, top і bottom, при цьому, якщо не задана ширина чи висота - блок буде розтягуватися відповідно до цих значень.

Стилі left, top, right, bottom ігноруються для статичних блоків, для решти блоків - задають зміщення блоку зліва, зверху, справа та знизу.

На перший час запам'ятайте таке правило:

Поексперементуйте у jsFiddle: розкоментовуйте по черзі стилі і дивіться результат.