Css позиціонування як розмістити елементи в css
За кілька років в інтернеті я знайшов для себе ряд корисних сайтів і сервісів, які не мають прямого відношення до сайтобудування і взагалі темі цього блогу, але я просто хотів би порекомендувати їх і вам:
Кешбек сервіси. такі як Epn.bz і Летішопс. Перший дозволить заощадити до 15% на Аліекспресс, а другий скупитися з Кешбек більш ніж в 1000 інтернет-магазинів. Пошук авіаквитків, просто відмінний сервіс - Aviasales.ru. Шукає по сотням сайтів і видає всі варіанти авіаквитків, можна вибирати найдешевші або ті, де менше час у дорозі. Також у них відмінне моб. додаток і браузерні плагін.
Проблема розстановки елементів повністю вирішується, якщо раз і назавжди засвоїти всі способи позиціонування елементів. За це відповідає CSS властивість position. У нього є чотири значення і ми розглянемо кожне з них.
Напевно ви знаєте, що елементи діляться на малі і блокові. Логічно, що рядкові елементи можуть розташовуватися на одному рядку. Простий приклад - тег . На одному рядку може бути кілька посилань. Якщо ми їх не розділимо, то так і буде. Абсолютно протилежно поводиться тег абзацу . Якщо ми розмістимо на веб-сторінці два абзаци, вони будуть відокремлені один від одного вертикальними відступами. Два абзацу не можуть розташовуватися на одному рядку, навіть якщо вони містять по одному слову. Це поведінка всіх блокових елементів за замовчуванням.
Навіщо потрібно позиціонування?
Отже, для чого нам взагалі позиціонування? Уявімо собі простенький сайт, який складається з шапки, контентного блоку, сайдбара і футера. Якщо ми розмістимо ці блоки і ніяк не змінимо їх стандартного блокового поведінки, вони просто стануть вертикально один за одним. Для шапки і футера це звичайний стан, але ось сайдбар зазвичай розташовується праворуч або ліворуч від контентного блоку. Таке відображення елементів (коли вони йдуть по вертикалі зверху вниз в тому порядку, в якому вони йдуть в html-коді) називають позиціонуванням в нормальному потоці. За допомогою css-властивості position можна задати ще три способи розміщення: абсолютний, відносний і фіксований.
Абсолютне позиціонування в css
Абсолютне позиціонування означає, що елемент повністю втрачає свої блокові властивості. Тобто, якщо ми пропишемо його для будь-якого з наших блоків, він як би випаде з нормального потоку, інші елементи перестануть його помічати.
Відповідно, всі елементи, які були нижче цього блоку, посунуться вгору. Задавши абсолютне позиціонування (position: absolute) ми можемо рухати елемент за допомогою властивостей left, right, top, bottom. При цьому відлік буде йти від країв вікна браузера. Якщо елемент вкладений в інший батьківський блок, то координати можуть відраховуватися від батька. Для цього йому потрібно задати position: relative. а вже потрібний дочірній блок позиціонувати абсолютно. Наприклад, задавши bottom: 0, right: 0, наш елемент стане притиснутим до нижнього правого краю. При абсолютному позиціонуванні можна вказувати негативні значення координат. Тоді елемент може частково "випасти" за сторінку або зовсім зникнути з неї.
відносне позиціонування
Наступний варіант позиціонування - відносний. Багато в чому він схожий на абсолютний. Для нього потрібно прописати в нашій таблиці стилів position: relative для потрібного елемента. Після цього ми можемо рухати його за допомогою тих же властивостей, що і при абсолютному позиціонуванні. Але зсув елемента буде відбуватися виходячи з тієї точки, де він був спочатку. Ще одна важлива відмінність - такий елемент не випадає з потоку.
Місце під нього залишається, навіть якщо сам елемент буде зміщений в інше місце. Відносне позиціонування може застосовуватися, коли потрібно, щоб якийсь блок трохи наїхав на інший, не випавши при цьому з нормального потоку. Інші блоки не помічають пересування відносного елемента, для них є тільки його початкове положення, в якому він був.
фіксоване позиціювання
Третє значення властивості position - це fixed. Як ви вже здогадалися, мова йде про фіксований позиціонуванні. Насправді, це дуже зручна річ. Напевно на деяких сайтах ви помічали елементи, які залишаються на сторінці при її вертикального прокручування? Це може бути якась важлива інформація, яку творці сайту хочуть залишити на видному місці. Для цього таку інформацію укладають в блок, якому задають фіксоване позиціонування.
статична позиціонування
Отже, ми розглянули три значення властивості position. Четверте (static) використовується за умовчанням і повертає елементу звичайне блочне поведінку. На практиці його прописують рідко, але забувати про його існування все-таки не варто. Припустимо, ви вирішили робити адаптивний дизайн для свого сайту. Наприклад, при максимальній ширині вікна в 900 пікселів ви хочете позиціонувати меню абсолютно, а при зменшенні ширини вікна до 650 пікселів - скасувати абсолютне позиціонування і повернути блок в нормальний потік. Якраз для цього може знадобитися position: static.
В ув'язненні
Ну а якщо ви хочете добре закріпити знання на практиці, я рекомендую вам пройти безкоштовний курс на цю тему на сайті Html Academy !. Понад 100 тисяч людей вже навчаються за допомогою цих інтерактивних курсів. А у мене на цьому все.