Влітку річки та озера дарують прохолоду, а зелені дерева захищають від палючого сонця.Влітку річки та озера дарують прохолоду, а зелені дерева захищають від палючого сонця.
Опис експерименту: В цій роботі експериментувала з властивістю position. Перший елемент Static, має position: static. Ця властивість йде за замовчуванням, елемент знаходиться на своєму звичайному місці.
Другий елемент Relative, має position:relative. Ця властивість показує, що елемент знаходиться на своєму звичайному місці, але його можна рухати за допомогою top,bottom, left,right.
div class="wrapper-for-absolute" має position:relative, це потрібно для того, щоб його дочірній елемент Absolute міг позиціонуватися відносно цього батьківського контейнера, а не відносно вікна перегляду.Елемент Absolute має position: absolute.Він позиціонується відносно контейнеру wrapper-for-absolute, його можна рухати за допомогою top,bottom, left,right. Але інші елементи в контейнері ігнорують цей елемент з position: absolute, розташовуються так, ніби цього елемента не існує в контейнері.
Елемент Fixed, має position: fixed. Ця властивість показує, що елемент знаходиться завжди на одному місці, навіть при прокрутці екрану, тому що він позиціонується відносно вікна перегляду, його можна рухати за допомогою top,bottom, left,right. А також йому можна задавати z-index, щоб накладати цей елемент поверх іншого або навпаки класти його в найнижчий слой.
div class="wrapper-for-sticky" має overflow: scroll, це потрібно для того, щоб його дочірній елемент Sticky міг приліпати до батьківського контейнера, для цього батьківський контейнер і повинен мати overflow: scroll або auto .Елемент Sticky має position: sticky; і top: 0. Спочатку він поводиться звичайно, а при прокрутці він доходить до заданого краю top: 0 і прилипає до нього.
Різниця між fixed і sticky. Рosition: fixed — це фіксація елемента відносно вікна браузера. Він завжди залишається на одному місці під час прокрутки сторінки.Він ніколи не позиціонується відносно батьківських елементів, лише відносно вікна браузера. position: sticky — це прилипання елемента до краю батьківського контейнера: коли досягає заданої позиції, ( в даному випадку top: 0) прилипає, але лише в межах свого батьківського блоку.