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

Відносне позиціонування

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

3.1 position: relative

Відносне позиціонування в CSS дозволяє елементам переміщуватися відносно їх початкового положення у потоці документа. При використанні position: relative елемент зберігає своє місце в нормальному потоці, але може зміщуватися за допомогою властивостей top, right, bottom і left. Ці властивості дозволяють зсувати елемент відносно його звичайного положення.

Основні принципи відносного позиціонування

При відносному позиціонуванні (position: relative) елемент переміщується зі свого вихідного положення у потоці документа. Це зміщення впливає тільки на сам елемент, а інші елементи залишаються на своїх місцях, ніби елемент не був переміщений. Це дозволяє створювати ефекти, де елементи перекривають один одного або створюють додаткові візуальні відступи.

Синтаксис:

    
      .element {
        position: relative;
        top: value;
        right: value;
        bottom: value;
        left: value;
      }

Де:

  • top: зміщує елемент вниз відносно його нормального положення
  • right: зміщує елемент вліво відносно його нормального положення
  • bottom: зміщує елемент вгору відносно його нормального положення
  • left: зміщує елемент вправо відносно його нормального положення
  • <значення>: може бути будь-яким допустимим значенням довжини в CSS (px, %, em тощо)
Telegram

3.2 Властивість top

Властивість top зміщує елемент вниз відносно його початкового положення.

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

CSS 
    
      .relative-top {
        position: relative;
        top: 20px; /* Зміщує елемент вниз на 20 пікселів */
      }

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

CSS 
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-top {
        position: relative;
        top: 20px;
        background-color: lightblue;
      }
HTML 
    
      <div class="container">
        <div class="box static-box">Це звичайний блок</div>
        <div class="box relative-top">Цей блок буде зміщений вниз на 20px.</div>
        <div class="box static-box">Це звичайний блок</div>
      </div>

3.3 Властивість right

Властивість right зміщує елемент вліво відносно його початкового положення.

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

CSS 
    
      .relative-right {
        position: relative;
        right: 20px; /* Зміщує елемент вліво на 20 пікселів */
      }

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

CSS 
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-right {
        position: relative;
        right: 20px;
        background-color: lightgreen;
        padding: 20px;
      }
HTML 
    
      <div class="container">
        <div class="box static-box">Це звичайний блок</div>
        <div class="box relative-right">Цей блок буде зміщений вліво на 20px.</div>
        <div class="box static-box">Це звичайний блок</div>
      </div>

3.4 Властивість bottom

Властивість bottom зміщує елемент вгору відносно його початкового положення.

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

CSS 
    
      .relative-bottom {
        position: relative;
        bottom: 20px; /* Зміщує елемент вгору на 20 пікселів */
      }

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

CSS 
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-bottom {
        position: relative;
        bottom: 20px;
        background-color: lightcoral;
        padding: 20px;
      }
HTML 
    
      <div class="container">
        <div class="box static-box">Це звичайний блок</div>
        <div class="box relative-bottom">Цей блок буде зміщений вгору на 20px.</div>
        <div class="box static-box">Це звичайний блок</div>
      </div>

3.5 Властивість left

Властивість left зміщує елемент вправо відносно його початкового положення.

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

CSS 
    
      .relative-left {
        position: relative;
        left: 20px; /* Зміщує елемент вправо на 20 пікселів */
      }

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

CSS 
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-left {
        position: relative;
        left: 20px;
        background-color: lightgoldenrodyellow;
        padding: 20px;
      }
HTML 
    
      <div class="container">
        <div class="box static-box">Це звичайний блок</div>
        <div class="box relative-left">Цей блок буде зміщений вправо на 20px.</div>
        <div class="box static-box">Це звичайний блок</div>
      </div>

3.6 Взаємодія із суміжними елементами

Елементи з position: relative залишаються в нормальному потоці документа, що означає, що вони все ще займають простір, яке займали б, якби не були зміщені. Це дозволяє зміщувати елементи без зміни розташування інших елементів на сторінці.

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

CSS 
    
      .container {
        border: 2px solid #000;
        padding: 10px;
      }

      .box {
        position: relative;
        background-color: #e74c3c;
        color: white;
        padding: 20px;
        margin: 10px;
        width: 200px;
      }

      .box1 {
        top: 20px;
      }

      .box2 {
        left: 20px;
      }
HTML 
    
      <div class="container">
        <div class="box box1">Елемент 1 (зміщений вниз)</div>
        <div class="box box2">Елемент 2 (зміщений вправо)</div>
        <div class="box">Елемент 3 (нормальне положення)</div>
      </div>

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

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