Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Типи позиціонування

Типи позиціонування

Frontend SELF UA
Рівень 21 , Лекція 0
Відкрита

1.1 Позиціонування static

Позиціонування в CSS визначає, як елементи розташовуються на веб-сторінці. Розуміння різних типів позиціонування дозволяє створювати складні та динамічні макети. Зараз ми детально розглянемо кожен тип позиціонування: static, relative, absolute, fixed і sticky.

static є значенням позиціонування за замовчуванням для всіх елементів. Елементи з цим типом позиціонування розташовуються в нормальному потоці документа, тобто вони йдуть один за одним у порядку, визначеному HTML-розміткою.

Приклад використання:

CSS 
    
      .static-box {
        background-color: #3498db;
        color: white;
        padding: 20px;
        margin: 10px;
      }
HTML 
    
      <div class="static-box">Елемент 1</div>
      <div class="static-box">Елемент 2</div>
      <div class="static-box">Елемент 3</div>

Пояснення коду:

  • .static-box: елементи з position: static;, які розташовуються в нормальному потоці документа один за одним

1.2 Позиціонування relative

relative дозволяє позиціонувати елемент відносно його нормального положення в потоці документа. Елемент залишається в нормальному потоці, але його можна змістити за допомогою властивостей top, right, bottom і left.

Telegram

Приклад використання:

CSS 
    
      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .relative-box {
        position: relative;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }
HTML 
    
      <div>
        <div class="box">Нормальний елемент</div>
        <div class="box relative-box">Зміщений елемент</div>
        <div class="box">Нормальний елемент</div>
      </div>

Пояснення коду:

  • .relative-box: елемент з position: relative;, який зміщений на 15 пікселів вниз і на 15 пікселів праворуч відносно свого нормального положення

1.3 Позиціонування absolute

absolute дозволяє позиціонувати елемент відносно найближчого предка з позиціонуванням, відмінним від static. Якщо такого предка немає, елемент позиціонується відносно початкового контексту (зазвичай це <html>).

Приклад використання:

CSS 
    
      .container {
        position: relative;
      }

      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .absolute-box {
        position: absolute;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }
HTML 
    
      <div class="container">
        <div class="box">Нормальний елемент</div>
        <div class="box absolute-box">Абсолютно позиціонований елемент</div>
        <div class="box">Нормальний елемент</div>
      </div>

Пояснення коду:

  • .container: контейнер з position: relative;, всередині якого позиціонується absolute елемент
  • .absolute-box: елемент з position: absolute, який позиціонується відносно контейнера. Зміщений на 15 пікселів вниз і на 15 пікселів праворуч від верхнього лівого кута контейнера.

1.4 Позиціонування fixed

fixed дозволяє позиціонувати елемент відносно вікна браузера. Такий елемент залишається на місці при прокрутці сторінки.

Приклад використання:

CSS 
    
      .container {
        height: 200px;
        overflow: auto;
      }
      .fixed-box {
        position: fixed;
        background-color: #f39c12;
        color: white;
        padding: 20px;
        top: 15px;
        right: 15px;
      }
HTML 
    
      <div class="container">
        <div class="fixed-box">Фіксований елемент</div>
        Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc...
      </div>

Пояснення коду:

  • .fixed-box: елемент з position: fixed;, який залишається на місці при прокрутці сторінки. Він розташований у правому верхньому куті вікна браузера.

1.5 Позиціонування sticky

sticky дозволяє елементу поводитися як relative доти, поки він не досягне заданої позиції при прокрутці, після чого він стає зафіксованим (поведінка як у fixed).

Приклад використання:

CSS 
    
      .sticky-box {
        position: sticky;
        background-color: #8e44ad;
        color: white;
        padding: 20px;
        top: 0;
      }

      .text {
        margin-top: 15px;
      }

      .content {
        height: 200px;
        background-color: #ecf0f1;
        overflow: auto;
      }
HTML 
    
      <div class="content">
        <div class="sticky-box">Sticky елемент</div>
        <div class="text">
          Suspendisse tellus sem...
        </div>
      </div>

Пояснення коду:

  • .sticky-box: елемент з position: sticky;, який поводиться як relative, поки верхня межа не досягне верхньої частини вікна браузера. Потім елемент фіксується й залишається на місці під час подальшої прокрутки.

1.6 Порівняння типів позиціонування

Порівняння типів позиціонування:

Тип позиціонування Опис Використання
static Позиціонування за замовчуванням. Елементи слідують у нормальному потоці документа. Основне розміщення елементів.
relative Позиціонування відносно нормального положення елемента. Зміщення елемента без його видалення з нормального потоку.
absolute Позиціонування відносно найближчого предка з позиціонуванням, відмінним від static. Точне розташування елемента всередині контейнера.
fixed Позиціонування відносно вікна браузера. Елементи, які мають залишатися на місці при прокрутці сторінки.
sticky Елемент поводиться як relative до досягнення заданої позиції, потім фіксується. Закріплення елемента при прокрутці.
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ