Позиціювання елементів на сторінці

1. position: static

За замовчуванням всі елементи на сторінці мають статичне позиціонування (position: static), це означає, що елемент не позиціонується, і з'являється в документі на своєму звичайному місці, тобто в тому ж порядку, як і в html-розмітці.
Немає необхідності спеціально призначати це властивість будь-якого елементу, якщо тільки вам не потрібно змінити раніше встановлений позиціонування на дефолтний.

2. position: relative

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

на тому місці, де б мав бути блок #content, утвориться порожній простір. Наступний за блоком #content, блок #footer НЕ переміститься нижче, тому що, #content як і раніше займає своє місце в документі, не дивлячись на те, що його пересунули. Всі інші елементи НЕ ЗНАЮТЬ, що елемент перемістився.

 3. position: absolute

Значення absolute властивості position задає елементу абсолютне позиціонування.
Абсолютне позиціонування використовується тоді, коли потрібно помістити елемент саме в тому місці екрана, де ми хочемо його бачити. Відповідно, відміряється його положення відступами зверху, праворуч, знизу і зліва кордону вікна.
Абсолютно позиційований елементи мають наступні особливості:
  • Випадають з потоку документа. Місце, яке вони займали, стає як би порожнім і його займають сусідні елементи.
  • Ширина за замовчуванням залежить від вмісту (а не розтягується на всю доступну ширину).
  • Залишаються на тому ж місці, де були, якщо не задані значення властивостей top, left, right, bottom.
  • Якщо рядковий елемент позиційований абсолютно, то він поводиться точно так само, як і абсолютно позиційовані блоки (можна задавати розміри).
  • Властивості left, top, right і bottom для «відносних» елементів задають зміщення відносно початкової позиції, а для «абсолютних» елементів вони задають розташування щодо якоїсь системи координат (вікно браузера за замовчуванням, або одного з батьків).
  • Якщо батьківський елемент має position: relative а дочірній блок position: absolute, то елемент буде позиціонуватися відносно батьківського  елемента

ВИСНОВОК: абсолютно позиційовані елементи видаляються з потоку, а відносні займають чужі позиції.

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, то відлік координат ведеться від батьківського.


Поєднання відносного і абсолютного позиціонування можна застосовувати і до псевдоелементів :: before і :: after. Це скорочує розмір коду HTML, оскільки нам вже не потрібні зайві елементи, і дозволяє робити всякі цікаві декоративні ефекти.

ЗАВДАННЯ ДЛЯ САМОСТІЙНОЇ РОБОТИ

Завдання 1
1.  Зкопіювати у свою папку  наступний код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Картина  стіні</title>
<link rel="stylesheet" href="position_absolute_img.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. Розмістити смужку скотчу посередині картини так як показано на малюнку:

Завдання 2

Використовуючи абсолютне позиціювання створити  таку веб-сторінку (квадрати розміром 50*50рх,  висота body: 150px; 

Завдання 3

Використовуючи абсолютне позиціювання створити  таку веб-сторінку (квадрати розміром 50*50рх,  висота body: 150px; 

Завдання 4

Використовуючи абсолютне позиціювання створити  таку веб-сторінку (квадрати розміром 50*50рх,  висота body: 150px; 

Завдання 5

Використовуючи абсолютне позиціювання створити  таку веб-сторінку (квадрати розміром 50*50рх,  висота body: 150px; 

Завдання 6

Використовуючи позиціюваня z-index створити  таку веб-сторінку (квадрати розміром 50*50рх,`  висота body: 150px;
Завдання 7
Використовуючи позиціюваня z-index створити  таку веб-сторінку (квадрати розміром 50*50рх,`  висота body: 150px;

Завдання 8

Використовуючи  відносне позиціювання створити  веб-сторінку  де основний блок стоїть по центру за допомогою margin: auto, а решта позиціонуються відносно нього за допомогою властивості position

Завдання 9

Використовуючи  відносне та абсолютне позиціювання створити  веб-сторінку  де основний блок стоїть по центру за допомогою margin: auto, а решта позиціонуються відносно нього за допомогою властивості position (квадрати 100*100рх, зелений блок 500*400рх)

Завдання 10



2 коментарі: