JavaRush /Курси /Frontend SELF UA /Фіксоване позиціонування

Фіксоване позиціонування

Frontend SELF UA

Рівень 21 , Лекція 4

Відкрита

5.1 position: fixed

Фіксоване позиціонування (position: fixed) в CSS дозволяє елементам залишатися на одному й тому ж місці на екрані, незалежно від прокрутки сторінки. Це потужний інструмент для створення елементів, які мають залишатися видимими та доступними в будь-який момент. Розглянемо детальніше плюси та мінуси фіксованого позиціонування.

Особливості фіксованого позиціонування:

Елементи з position: fixed видаляються з нормального потоку документа і розташовуються відносно вікна браузера
Такі елементи залишаються на місці при прокрутці сторінки, забезпечуючи постійну видимість
Використання властивостей top, right, bottom і left дозволяє задавати точне розташування елемента відносно вікна браузера

Синтаксис:

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

Де:

top: відстань від верхнього краю вікна браузера до верхнього краю елемента
right: відстань від правого краю вікна браузера до правого краю елемента
bottom: відстань від нижнього краю вікна браузера до нижнього краю елемента
left: відстань від лівого краю вікна браузера до лівого краю елемента

Приклад фіксованого позиціонування:

CSS

    
      .wrapper {
        height: 150px;
        overflow: auto;
      }

      .fixed-box {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 100px;
        height: 100px;
        background-color: #3498db;
        color: white;
        text-align: center;
        line-height: 100px;
      }

      .content {
        background: linear-gradient(white, gray);
      }

HTML

    
      <div class="wrapper">
        <div class="fixed-box">Fixed</div>
        <div class="content">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        </div>
      </div>

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

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

5.2 Переваги фіксованого позиціонування

1. Постійна видимість

Елементи з фіксованим позиціонуванням залишаються на місці незалежно від прокрутки, що робить їх ідеально придатними для елементів, які мають бути завжди видимі для користувача, наприклад, навігаційні меню, кнопки "Вгору" та сповіщення.

Приклад:

CSS

    
      .wrapper {
        height: 150px;
        overflow: auto;
      }

      .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #2c3e50;
        color: white;
        text-align: center;
        padding: 10px;
      }

      .content {
        margin-top: 60px;
        background: linear-gradient(white, gray);
      }

HTML

    
      <div class="wrapper">
        <div class="fixed-header">Фіксоване меню</div>
        <div class="content">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ут ante. Nulla volutpat finibus porta.
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattис, justo lorem ullamcorper orci, elementum pretium augue justo ут ante. Nulla volutpat finibus porta.
        </div>
      </div>

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

.fixed-header: фіксоване меню, яке залишається у верхній частині вікна браузера під час прокрутки сторінки

2. Покращена навігація

Фіксовані елементи покращують навігацію на сторінці, роблячи важливі посилання та елементи управління завжди доступними користувачу.

Приклад:

CSS

    
      .wrapper {
        height: 150px;
        overflow: auto;
      }

      .fixed-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 200px;
        height: 100%;
        background-color: #34495e;
        color: white;
        padding: 20px;
      }

      .content {
        margin-left: 220px;
        background: linear-gradient(white, gray);
      }

HTML

    
      <div class="wrapper">
        <div class="fixed-sidebar">
          <ul>
            <li><a href="#" style="color: white;">Посилання 1</a></li>
            <li><a href="#" style="color: white;">Посилання 2</a></li>
            <li><a href="#" style="color: white;">Посилання 3</a></li>
          </ul>
        </div>
        <div class="content">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ут. Vestibulum ут tortor vel ligula laoreet fermentum ут quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin...
        </div>
      </div>

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

.fixed-sidebar: фіксоване бокове меню, яке залишається на місці під час прокрутки сторінки, покращуючи доступність навігації.

5.3 Мінуси фіксованого позиціювання

1. Потенційні проблеми з адаптивністю

Фіксовані елементи можуть створювати проблеми з адаптивністю, особливо на невеликих екранах, де їх фіксовані розміри можуть перекривати важливий контент.

Приклад:

CSS

    
      .wrapper {
        max-height: 150px;
        overflow: auto;
      }

      .fixed-element {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 150px;
        background-color: #e74c3c;
        color: white;
        text-align: center;
      }

      .content {
        background: linear-gradient(white, gray);
      }

HTML

    
      <div class="wrapper">
        <div class="fixed-element">Фіксований елемент</div>
        <div class="content">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ут ante. Nulla volutpat finibus porta.
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ут ante. Nulla volutpat finibus porta.
        </div>
      </div>

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

.fixed-element: фіксований елемент, який може перекривати контент на невеликих екранах, створюючи проблеми з доступністю та адаптивністю

2. Складність у розташуванні відносно інших елементів

Фіксовані елементи не враховують інші елементи на сторінці, що може призводити до перекриттів та неправильного позиціювання.

Приклад

CSS

    
      .wrapper {
        height: 150px;
        overflow: auto;
      }

      .fixed-box {
        position: fixed;
        top: 50px;
        right: 50px;
        width: 200px;
        background-color: #9b59b6;
        color: white;
        text-align: center;
      }

      .content-box {
        margin-top: 100px;
        padding: 20px;
        background-color: #ecf0f1;
        border: 2px solid #bdc3c7;
        width: 400px;
      }

HTML

    
      <div class="wrapper">
        <div class="fixed-box">Фіксований елемент</div>
        <div class="content-box">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed портtitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna.
        </div>
      </div>

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

.fixed-box: фіксований елемент, який може перекривати інші елементи на сторінці, що може викликати проблеми зі сприйняттям контенту

Попередня Попередня лекція

Наступна Наступна лекція

Коментарі

ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ