Принципи CSS-позиціювання
Позиціонування - це керування місцем розташування (позицією) елемента на веб-сторінці
Уявімо вікно браузера як систему координат:
Принципи CSS-позиціювання - в тому, що можна розташувати бокс в системі координат де завгодно.
Основною властивістю, які керують позиціонуванням в CSS, є властивість position. Ця властивість може приймати одне з наступних значень:
- static: стандартне позиціонування елемента, значення за замовчуванням
- absolute: елемент позиціонується щодо кордонів елемента-контейнера, якщо у того властивість position не дорівнює static
- relative: елемент позиціонується щодо його позиції за замовчуванням. Як правило, основна мета відносного позиціонування полягає не в тому, щоб перемістити елемент, а в тому, щоб встановити нову точку прив'язки для абсолютного позиционированния вкладених в нього елементів
- fixed: елемент позиціонується щодо вікна браузера, це дозволяє створити фіксовані елементи, які не змінюють положення при прокручуванні
See the Pen Огляд доступних типів позиціонування by kravets (@raisa69) on CodePen.
Область перегляду браузера має верхній, нижній, правий і лівий край.
Для кожного з цих чотирьох країв є відповідна властивість CSS:
- left (відступ від краю зліва),
- right (відступ від краю праворуч),
- top (відступ від краю контейнера зверху) і
- bottom (відступ знизу).
Значення цих властивостей вказуються в пікселях, em або відсотках. Необов'язково задавати значення для всіх чотирьох сторін. Як правило, встановлюють тільки два значення - відступ від верхнього краю top і відступ від лівого краю left.
1. position: static
За замовчуванням всі елементи на сторінці мають статичне позиціонування (position: static), це означає, що елемент не позиціонується, і з'являється в документі на своєму звичайному місці, тобто в тому ж порядку, як і в html-розмітці.Немає необхідності спеціально призначати це властивість будь-якого елементу, якщо тільки не потрібно змінити раніше встановленt позиціонування на дефолтний.
2. position: relative
Положення елемента встановлюється щодо його вихідного місця. Додавання властивостей left, top, right і bottom змінює позицію елемента і зрушує його в ту чи іншу сторону від початкового розташування.
Наприклад, потрібно перемістити блок #content на 20 пікселів вниз, і на 40 пікселів вліво:
See the Pen position:reletive by kravets (@raisa69) on CodePen.
на тому місці, де б мав бути блок #content, утвориться порожній простір. Наступний за блоком #content, блок #footer НЕ переміститься нижче, тому що, #content як і раніше займає своє місце в документі, не дивлячись на те, що його пересунули. Всі інші елементи НЕ ЗНАЮТЬ, що елемент перемістився.
3. position: absolute
Значення absolute властивості position задає елементу абсолютне позиціонування.Абсолютне позиціонування використовується тоді, коли потрібно помістити елемент саме в тому місці екрана, де ми хочемо його бачити. Відповідно, відміряється його положення відступами зверху, праворуч, знизу і зліва кордону вікна.
Абсолютно позиційований елементи мають наступні особливості:- Випадають з потоку документа. Місце, яке вони займали, стає як би порожнім і його займають сусідні елементи.
- Ширина за замовчуванням залежить від вмісту (а не розтягується на всю доступну ширину).
- Залишаються на тому ж місці, де були, якщо не задані значення властивостей top, left, right, bottom.
- Якщо рядковий елемент позиційований абсолютно, то він поводиться точно так само, як і абсолютно позиційовані блоки (можна задавати розміри).
- Властивості left, top, right і bottom для «відносних» елементів задають зміщення відносно початкової позиції, а для «абсолютних» елементів вони задають розташування щодо якоїсь системи координат (вікно браузера за замовчуванням, або одного з батьків).
- Якщо батьківський елемент має position: relative а дочірній блок position: absolute, то елемент буде позиціонуватися відносно батьківського елемента
ВИСНОВОК: абсолютно позиційовані елементи видаляються з потоку, а відносні займають чужі позиції.
See the Pen position:absolute by kravets (@raisa69) on CodePen.
Якщо елемент з абсоютно позиціонуванням розташовується в іншому контейнері, у якого в свою чергу значення властивості position не дорівнює static, то елемент позиціонується щодо кордонів контейнера:
See the Pen position:absolute2 by kravets (@raisa69) on CodePen.
See the Pen Абсолютне позиціонування елементів by kravets (@raisa69) on CodePen.
Приклад позиціювання зображення
See the Pen position: absolute; by kravets (@raisa69) on CodePen.
4. position: fixed
Фіксоване позиціювання (position: fixed), є підрозділом абсолютного позиціонування. Єдина його відмінність в тому, що він завжди знаходиться у видимій області екрана, і не рухається під час прокрутки сторінки. В цьому відношенні, він трохи схожий на фіксоване фонове зображення.
- Фіксований елемент випадає з потоку документа.
- Елемент прив'язується до певної точки у вікні браузера і залишається на ній завжди, навіть при прокручуванні сторінки.
- Фіксований елемент можна позиціонувати за допомогою властивостей top, left, right, bottom, але точка відліку завжди прив'язана до вікна браузера.
5. position:relative + position:absolute
Зазвичай відносне позиціонування саме по собі застосовується не часто, оскільки для зміщення елемента від його початкового положення є ряд інших властивостей, наприклад, margin або transform.
Але комбінація різних типів позиціонування для вкладених елементів є одним із зручних і практичних прийомів верстки.
Якщо для батьківського елемента задати relative, а для дочірнього absolute, то відбудеться зміна системи координат і положення дочірнього елемента при цьому вказується відносно батьківського елемента
Відлік координат ведеться від внутрішнього краю кордону, значення padding не враховуються.
Приклад:
Для батьківcького елемента допустимо вказувати значення relative, absolute, fixed або sticky. Якщо у дочірнього елемента властивість position:absolute, то відлік координат ведеться від батьківського.
See the Pen position:relative+position:absolute by kravets (@raisa69) on CodePen.
Приклад застосування позиціювання до псевдоелементів
Поєднання відносного і абсолютного позиціонування можна застосовувати і до псевдоелементів :: before і :: after. Це скорочує розмір коду HTML, оскільки нам вже не потрібні зайві елементи, і дозволяє робити всякі цікаві декоративні ефекти.
See the Pen position after before by kravets (@raisa69) on CodePen.
See the Pen css_content_course_pseudoelements-before-after_list by kravets (@raisa69) on CodePen.
Рекомендовані відео по темі:
Завдання 1
1. Зкопіювати у свою папку наступний код:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Картина на стіні</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="photo">
<img src="flower.jpg" />
</div>
</body>
</html>
для style.css
body { background: #F7EEBC; }
.photo {
border: 5px solid white;
height: 225px; width: 300px;
margin: 50px auto;
/*тіні для картини згенерувати на сайті cssmatic.com/box-shadow*/
-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
.photo:before {
content: "scotch"; /*смужка скотчу */
height: 20px;
width: 100px;
background: rgba(255,0,0,0.5);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
Завдання 2
Використовуючи абсолютне позиціювання створити таку веб-сторінку (квадрати розміром 50*50рх, висота body: 150px;
Завдання 3
Використовуючи абсолютне позиціювання створити таку веб-сторінку (квадрати розміром 50*50рх, висота body: 150px;
Завдання 4
Завдання 5
Завдання 6
Завдання 7
Завдання 8
Завдання 9
Використовуючи відносне та абсолютне позиціювання створити веб-сторінку де основний блок стоїть по центру за допомогою margin: auto, а решта позиціонуються відносно нього за допомогою властивості position (квадрати 100*100рх, зелений блок 500*400рх)
Завдання 10
Завдання 11
See the Pen maket-position-task by kravets (@raisa69) on CodePen.
Результат має бути таким: